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/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>
+  );
+}