Add visualiser controls + target mode

Summary:
Now that we have panels for tree visualiser separately we can have visualiser specific controls. There is a dedicated button for focus mode which should make that more discoverable and a better implementation of target mode which uses a slider. This has several benefits:
1. more discoverable
2. more obvious what is going on with the text prompts and a real slider control instead of mouse enter
3. there is no context menu getting in the way of the content

Changelog: UIDebugger Add visualizer target mode feature for selecting views in the z stack easily
Changelog: UIDebugger Add FocusMode button to visualiser toolbar

Reviewed By: mweststrate

Differential Revision: D47671658

fbshipit-source-id: 6f657f9d417280627457624660b934c9898cda58

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

@@ -7,15 +7,23 @@
  * @format
  */
 
-import React, {useEffect, useMemo, useRef} from 'react';
+import React, {useEffect, useMemo, useRef, useState} from 'react';
 import {Bounds, Coordinate, Id, ClientNode} from '../../ClientTypes';
 import {NestedNode, OnSelectNode} from '../../DesktopTypes';
 
-import {produce, styled, theme, usePlugin, useValue} from 'flipper-plugin';
+import {
+  produce,
+  styled,
+  theme,
+  usePlugin,
+  useValue,
+  Layout,
+} from 'flipper-plugin';
 import {plugin} from '../../index';
 import {head, isEqual, throttle} from 'lodash';
 import {useDelay} from '../../hooks/useDelay';
 import {Tooltip} from 'antd';
+import {TargetModeState, VisualiserControls} from './VisualizerControls';
 
 export const Visualization2D: React.FC<
   {
@@ -32,7 +40,12 @@ export const Visualization2D: React.FC<
   const focusedNodeId = useValue(instance.uiState.focusedNode);
 
   const selectedNodeId = useValue(instance.uiState.selectedNode);
-  const hoveredNodeId = head(useValue(instance.uiState.hoveredNodes));
+  const hoveredNodes = useValue(instance.uiState.hoveredNodes);
+  const hoveredNodeId = head(hoveredNodes);
+
+  const [targetMode, setTargetMode] = useState<TargetModeState>({
+    state: 'disabled',
+  });
   const focusState = useMemo(() => {
     //use the snapshot node as root since we cant realistically visualise any node above this
     const rootNode = snapshot && toNestedNode(snapshot.nodeId, nodes);
@@ -111,84 +124,114 @@ export const Visualization2D: React.FC<
 
   const pxScaleFactor = calcPxScaleFactor(snapshotNode.bounds, width);
 
-  return (
-    <div
-      onMouseLeave={(e) => {
-        e.stopPropagation();
-        //the context menu triggers this callback but we dont want to remove hover effect
-        if (!instance.uiState.isContextMenuOpen.get()) {
-          instance.uiActions.onHoverNode();
-        }
+  const overlayCursor =
+    targetMode.state === 'disabled' ? 'pointer' : 'crosshair';
+
+  const onClickOverlay = () => {
+    instance.uiActions.onSelectNode(hoveredNodeId, 'visualiser');
+    if (targetMode.state !== 'disabled') {
+      setTargetMode({
+        state: 'selected',
+        targetedNodes: hoveredNodes.slice().reverse(),
+        sliderPosition: hoveredNodes.length - 1,
+      });
+    }
+  };
+
+  return (
+    <Layout.Container>
+      <VisualiserControls
+        focusedNode={focusedNodeId}
+        selectedNode={selectedNodeId?.id}
+        setTargetMode={setTargetMode}
+        targetMode={targetMode}
+      />
 
-        visualizerActive.current = false;
-      }}
-      onMouseEnter={() => {
-        visualizerActive.current = true;
-      }}
-      //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
-      style={
-        {
-          backgroundColor: theme.backgroundWash,
-          borderRadius: theme.borderRadius,
-          overflowY: 'auto',
-          overflowX: 'hidden',
-          position: 'relative', //this is for the absolutely positioned overlays
-          [pxScaleFactorCssVar]: pxScaleFactor,
-          width: toPx(focusState.actualRoot.bounds.width),
-          height: toPx(focusState.actualRoot.bounds.height),
-        } as React.CSSProperties
-      }>
-      {hoveredNodeId && (
-        <HoveredOverlay
-          onSelectNode={instance.uiActions.onSelectNode}
-          key={hoveredNodeId}
-          nodeId={hoveredNodeId}
-          nodes={nodes}
-        />
-      )}
-      {selectedNodeId && (
-        <OverlayBorder
-          type="selected"
-          nodeId={selectedNodeId.id}
-          nodes={nodes}
-        />
-      )}
       <div
-        ref={rootNodeRef as any}
-        style={{
-          /**
-           * This relative position is so the rootNode visualization 2DNode and outer border has a non static element to
-           * position itself relative to.
-           *
-           * Subsequent Visualization2DNode are positioned relative to their parent as each one is position absolute
-           * which despite the name acts are a reference point for absolute positioning...
-           *
-           * When focused the global offset of the focussed node is used to offset and size this 'root' node
-           */
-          position: 'relative',
-          marginLeft: toPx(focusState.focusedRootGlobalOffset.x),
-          marginTop: toPx(focusState.focusedRootGlobalOffset.y),
-          width: toPx(focusState.focusedRoot.bounds.width),
-          height: toPx(focusState.focusedRoot.bounds.height),
-          overflow: 'hidden',
-        }}>
-        {snapshotNode && (
-          <img
-            src={'data:image/png;base64,' + snapshot.data}
-            style={{
-              marginLeft: toPx(-focusState.focusedRootGlobalOffset.x),
-              marginTop: toPx(-focusState.focusedRootGlobalOffset.y),
-              width: toPx(snapshotNode.bounds.width),
-              height: toPx(snapshotNode.bounds.height),
-            }}
+        onMouseLeave={(e) => {
+          e.stopPropagation();
+          //the context menu triggers this callback but we dont want to remove hover effect
+          if (!instance.uiState.isContextMenuOpen.get()) {
+            instance.uiActions.onHoverNode();
+          }
+
+          visualizerActive.current = false;
+        }}
+        onMouseEnter={() => {
+          visualizerActive.current = true;
+        }}
+        //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
+        style={
+          {
+            backgroundColor: theme.backgroundWash,
+            borderRadius: theme.borderRadius,
+            overflowY: 'auto',
+            overflowX: 'hidden',
+            position: 'relative', //this is for the absolutely positioned overlays
+            [pxScaleFactorCssVar]: pxScaleFactor,
+            width: toPx(focusState.actualRoot.bounds.width),
+            height: toPx(focusState.actualRoot.bounds.height),
+          } as React.CSSProperties
+        }>
+        {hoveredNodeId && (
+          <DelayedHoveredToolTip
+            key={hoveredNodeId}
+            nodeId={hoveredNodeId}
+            nodes={nodes}>
+            <OverlayBorder
+              cursor={overlayCursor}
+              onClick={onClickOverlay}
+              nodeId={hoveredNodeId}
+              nodes={nodes}
+              type="hovered"
+            />
+          </DelayedHoveredToolTip>
+        )}
+        {selectedNodeId && (
+          <OverlayBorder
+            cursor={overlayCursor}
+            type="selected"
+            nodeId={selectedNodeId.id}
+            nodes={nodes}
           />
         )}
-        <MemoedVisualizationNode2D
-          node={focusState.focusedRoot}
-          onSelectNode={onSelectNode}
-        />
+        <div
+          ref={rootNodeRef as any}
+          style={{
+            /**
+             * This relative position is so the rootNode visualization 2DNode and outer border has a non static element to
+             * position itself relative to.
+             *
+             * Subsequent Visualization2DNode are positioned relative to their parent as each one is position absolute
+             * which despite the name acts are a reference point for absolute positioning...
+             *
+             * When focused the global offset of the focussed node is used to offset and size this 'root' node
+             */
+            position: 'relative',
+            marginLeft: toPx(focusState.focusedRootGlobalOffset.x),
+            marginTop: toPx(focusState.focusedRootGlobalOffset.y),
+            width: toPx(focusState.focusedRoot.bounds.width),
+            height: toPx(focusState.focusedRoot.bounds.height),
+            overflow: 'hidden',
+          }}>
+          {snapshotNode && (
+            <img
+              src={'data:image/png;base64,' + snapshot.data}
+              style={{
+                marginLeft: toPx(-focusState.focusedRootGlobalOffset.x),
+                marginTop: toPx(-focusState.focusedRootGlobalOffset.y),
+                width: toPx(snapshotNode.bounds.width),
+                height: toPx(snapshotNode.bounds.height),
+              }}
+            />
+          )}
+          <MemoedVisualizationNode2D
+            node={focusState.focusedRoot}
+            onSelectNode={onSelectNode}
+          />
+        </div>
       </div>
-    </div>
+    </Layout.Container>
   );
 };
 
@@ -257,15 +300,11 @@ function Visualization2DNode({
   );
 }
 
-function HoveredOverlay({
-  nodeId,
-  nodes,
-  onSelectNode,
-}: {
+const DelayedHoveredToolTip: React.FC<{
   nodeId: Id;
   nodes: Map<Id, ClientNode>;
-  onSelectNode: OnSelectNode;
-}) {
+  children: JSX.Element;
+}> = ({nodeId, nodes, children}) => {
   const node = nodes.get(nodeId);
 
   const isVisible = useDelay(longHoverDelay);
@@ -281,29 +320,23 @@ function HoveredOverlay({
       align={{
         offset: [0, 7],
       }}>
-      <OverlayBorder
-        onClick={() => {
-          onSelectNode(nodeId, 'visualiser');
-        }}
-        nodeId={nodeId}
-        nodes={nodes}
-        type="hovered"
-      />
+      {children}
     </Tooltip>
   );
-}
+};
 
 const OverlayBorder = styled.div<{
+  cursor: 'pointer' | 'crosshair';
   type: 'selected' | 'hovered';
   nodeId: Id;
   nodes: Map<Id, ClientNode>;
-}>(({type, nodeId, nodes}) => {
+}>(({type, nodeId, nodes, cursor}) => {
   const offset = getTotalOffset(nodeId, nodes);
   const node = nodes.get(nodeId);
   return {
     zIndex: 100,
     pointerEvents: type === 'selected' ? 'none' : 'auto',
-    cursor: 'pointer',
+    cursor: cursor,
     position: 'absolute',
     top: toPx(offset.y),
     left: toPx(offset.x),

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

@@ -0,0 +1,139 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {Button, Slider, Tooltip, Typography} from 'antd';
+import {Layout, produce, theme, usePlugin} from 'flipper-plugin';
+import {Id} from '../../ClientTypes';
+import {plugin} from '../../index';
+import React from 'react';
+import {
+  AimOutlined,
+  FullscreenExitOutlined,
+  FullscreenOutlined,
+} from '@ant-design/icons';
+
+export type TargetModeState =
+  | {
+      state: 'selected';
+      targetedNodes: Id[];
+      sliderPosition: number;
+    }
+  | {
+      state: 'active';
+    }
+  | {
+      state: 'disabled';
+    };
+
+export function VisualiserControls({
+  targetMode,
+  setTargetMode,
+  selectedNode,
+  focusedNode,
+}: {
+  selectedNode?: Id;
+  focusedNode?: Id;
+  setTargetMode: (targetMode: TargetModeState) => void;
+  targetMode: TargetModeState;
+}) {
+  const instance = usePlugin(plugin);
+
+  const focusDisabled = focusedNode == null && selectedNode == null;
+  const focusToolTip = focusDisabled
+    ? 'Select a node to focus it'
+    : focusedNode == null
+    ? 'Focus current node'
+    : 'Remove focus';
+
+  const targetToolTip =
+    targetMode.state === 'disabled' ? 'TargetMode' : 'Exit target mode';
+
+  return (
+    <Layout.Right style={{padding: theme.space.medium}} gap="medium" center>
+      <Layout.Container style={{userSelect: 'none'}}>
+        {targetMode.state === 'active' && (
+          <Typography.Text strong>Target mode: Select element</Typography.Text>
+        )}
+        {targetMode.state === 'disabled' && (
+          <Typography.Text strong>Interactive Visualizer</Typography.Text>
+        )}
+        {targetMode.state === 'selected' && (
+          <Slider
+            min={0}
+            tooltipVisible={false}
+            value={targetMode.sliderPosition}
+            max={targetMode.targetedNodes.length - 1}
+            onChange={(value) => {
+              setTargetMode(
+                produce(targetMode, (draft) => {
+                  draft.sliderPosition = value;
+                }),
+              );
+              instance.uiActions.onSelectNode(
+                targetMode.targetedNodes[value],
+                'visualiser',
+              );
+            }}
+          />
+        )}
+      </Layout.Container>
+
+      <Layout.Horizontal gap="medium">
+        <Tooltip title={targetToolTip}>
+          <Button
+            onClick={() => {
+              if (targetMode.state === 'disabled') {
+                setTargetMode({state: 'active'});
+              } else {
+                setTargetMode({state: 'disabled'});
+              }
+            }}
+            icon={
+              <AimOutlined
+                style={{
+                  color:
+                    targetMode.state === 'disabled'
+                      ? theme.black
+                      : theme.primaryColor,
+                }}
+              />
+            }
+          />
+        </Tooltip>
+        <Tooltip title={focusToolTip}>
+          <Button
+            disabled={focusDisabled}
+            onClick={() => {
+              if (focusedNode == null) {
+                instance.uiActions.onFocusNode(selectedNode);
+              } else {
+                instance.uiActions.onFocusNode();
+              }
+            }}
+            icon={
+              focusedNode == null ? (
+                <FullscreenExitOutlined
+                  style={{
+                    color: theme.black,
+                  }}
+                />
+              ) : (
+                <FullscreenOutlined
+                  style={{
+                    color: theme.primaryColor,
+                  }}
+                />
+              )
+            }
+          />
+        </Tooltip>
+      </Layout.Horizontal>
+    </Layout.Right>
+  );
+}

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

@@ -90,7 +90,7 @@ export function uiActions(
         tracker.track('node-focused', {name: focusedNode.name, tags});
       }
 
-      uiState.selectedNode.set(undefined);
+      uiState.selectedNode.set({id: node, source: 'visualiser'});
     }
 
     uiState.focusedNode.set(node);