increase highlight time and random colours for event monitoring

Summary:
1. makes it easier to tellwhen a parent and child hightlight together
2. Longer times means you have more time to click it and see

changelog: UIDebugger event debugger - increased highlight time. Nodes get random highlight color

Reviewed By: lblasa

Differential Revision: D49501954

fbshipit-source-id: 9456c00e0df77c40934eb95b4b48b566c7715181

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

@@ -26,6 +26,8 @@ export type LiveClientState = {
   nodes: Map<Id, ClientNode>;
 };
 
+export type Color = string;
+
 export type UIState = {
   viewMode: Atom<ViewMode>;
   wireFrameMode: Atom<WireFrameMode>;
@@ -36,7 +38,7 @@ export type UIState = {
   isContextMenuOpen: Atom<boolean>;
   hoveredNodes: Atom<Id[]>;
   selectedNode: Atom<NodeSelection | undefined>;
-  highlightedNodes: Atom<Set<Id>>;
+  highlightedNodes: Atom<Map<Id, Color>>;
   focusedNode: Atom<Id | undefined>;
   expandedNodes: Atom<Set<Id>>;
   visualiserWidth: Atom<number>;

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

@@ -8,7 +8,7 @@
  */
 
 import {Id, ClientNode} from '../../ClientTypes';
-import {OnSelectNode} from '../../DesktopTypes';
+import {Color, OnSelectNode} from '../../DesktopTypes';
 import React, {
   CSSProperties,
   Ref,
@@ -373,7 +373,7 @@ function TreeNodeRow({
   transform: string;
   innerRef: Ref<any>;
   treeNode: TreeNode;
-  highlightedNodes: Set<Id>;
+  highlightedNodes: Map<Id, Color>;
   selectedNode?: Id;
   hoveredNode?: Id;
   isUsingKBToScroll: RefObject<MillisSinceEpoch>;
@@ -410,7 +410,7 @@ function TreeNodeRow({
       />
 
       <TreeNodeContent
-        isHighlighted={highlightedNodes.has(treeNode.id)}
+        highlightColor={highlightedNodes.get(treeNode.id)}
         isSelected={isSelected}
         isHovered={hoveredNode === treeNode.id}
         onMouseEnter={() => {
@@ -501,8 +501,8 @@ const TreeNodeContent = styled.li<{
   item: TreeNode;
   isHovered: boolean;
   isSelected: boolean;
-  isHighlighted: boolean;
-}>(({item, isHovered, isSelected, isHighlighted}) => ({
+  highlightColor?: string;
+}>(({item, isHovered, isSelected, highlightColor}) => ({
   display: 'flex',
   alignItems: 'center',
   height: TreeItemHeight,
@@ -513,13 +513,15 @@ const TreeNodeContent = styled.li<{
   borderStyle: 'solid',
   overflow: 'hidden',
   whiteSpace: 'nowrap',
-  backgroundColor: isHighlighted
-    ? 'rgba(255,0,0,.3)'
-    : isSelected
-    ? theme.selectionBackgroundColor
-    : isHovered
-    ? theme.backgroundWash
-    : theme.backgroundDefault,
+  opacity: highlightColor != null ? 0.6 : 1,
+  backgroundColor:
+    highlightColor != null
+      ? highlightColor
+      : isSelected
+      ? theme.selectionBackgroundColor
+      : isHovered
+      ? theme.backgroundWash
+      : theme.backgroundDefault,
 }));
 
 function ExpandedIconOrSpace(props: {

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

@@ -324,7 +324,7 @@ function Visualization2DNode({
     />
   ));
 
-  const isHighlighted = useValue(instance.uiState.highlightedNodes).has(
+  const highLightColor = useValue(instance.uiState.highlightedNodes).get(
     node.id,
   );
 
@@ -346,8 +346,8 @@ function Visualization2DNode({
         top: toPx(node.bounds.y),
         width: toPx(node.bounds.width),
         height: toPx(node.bounds.height),
-        opacity: isHighlighted ? 0.3 : 1,
-        backgroundColor: isHighlighted ? 'red' : 'transparent',
+        opacity: highLightColor != null ? 0.7 : 1,
+        backgroundColor: highLightColor,
       }}>
       {showBorder && <NodeBorder />}
 

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

@@ -30,6 +30,7 @@ import {
   WireFrameMode,
   AugmentedFrameworkEvent,
   StreamInterceptorEventEmitter,
+  Color,
 } from './DesktopTypes';
 import EventEmitter from 'eventemitter3';
 import {addInterceptors} from './fb-stubs/StreamInterceptor';
@@ -235,7 +236,10 @@ export function plugin(client: PluginClient<Events, Methods>) {
 
     uiState.highlightedNodes.update((draft) => {
       for (const node of nodesToHighlight) {
-        draft.add(node);
+        draft.set(
+          node,
+          `#${Math.floor(Math.random() * 16777215).toString(16)}`,
+        );
       }
     });
 
@@ -300,8 +304,7 @@ export function plugin(client: PluginClient<Events, Methods>) {
   };
 }
 
-const HighlightTime = 300;
-
+const HighlightTime = 1500;
 export {Component} from './components/main';
 export * from './ClientTypes';
 
@@ -317,7 +320,7 @@ function createUIState(): UIState {
     streamState: createState<StreamState>({state: 'Ok'}),
     visualiserWidth: createState(Math.min(window.innerWidth / 4.5, 500)),
 
-    highlightedNodes: createState(new Set<Id>()),
+    highlightedNodes: createState(new Map<Id, Color>()),
 
     selectedNode: createState<NodeSelection | undefined>(undefined),
     //used to indicate whether we will higher the visualizer / tree when a matching event comes in