Add wireframe mode control

Summary:
This allows you to control how the wire frames are drawn, useful when there are lots of overalpping wireframes

Changelog: UIDebugger - Added wireframe mode control, useful when lots of overlapping wireframes

Reviewed By: aigoncharov

Differential Revision: D47949841

fbshipit-source-id: 72de7d085ca433557107ab0cc6e4399220836d9f

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

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Button, Slider, Tooltip, Typography} from 'antd';
+import {Button, Dropdown, Menu, Slider, Tooltip, Typography} from 'antd';
 import {Layout, produce, theme, usePlugin} from 'flipper-plugin';
 import {Id} from '../../ClientTypes';
 import {plugin} from '../../index';
@@ -16,10 +16,11 @@ import {
   AimOutlined,
   FullscreenExitOutlined,
   FullscreenOutlined,
+  PicCenterOutlined,
 } from '@ant-design/icons';
 import {tracker} from '../../utils/tracker';
 import {debounce} from 'lodash';
-
+import {WireFrameMode} from '../../DesktopTypes';
 export type TargetModeState =
   | {
       state: 'selected';
@@ -38,7 +39,11 @@ export function VisualiserControls({
   setTargetMode,
   selectedNode,
   focusedNode,
+  wireFrameMode,
+  onSetWireFrameMode,
 }: {
+  wireFrameMode: WireFrameMode;
+  onSetWireFrameMode: (mode: WireFrameMode) => void;
   selectedNode?: Id;
   focusedNode?: Id;
   setTargetMode: (targetMode: TargetModeState) => void;
@@ -54,7 +59,7 @@ export function VisualiserControls({
     : 'Remove focus';
 
   const targetToolTip =
-    targetMode.state === 'disabled' ? 'TargetMode' : 'Exit target mode';
+    targetMode.state === 'disabled' ? 'Target Mode' : 'Exit  target mode';
 
   return (
     <Layout.Right style={{padding: theme.space.medium}} gap="medium" center>
@@ -81,13 +86,43 @@ export function VisualiserControls({
                 targetMode.targetedNodes[value],
                 'visualiser',
               );
+
               debouncedReportTargetAdjusted();
             }}
           />
         )}
       </Layout.Container>
 
-      <Layout.Horizontal gap="medium">
+      <Layout.Horizontal gap="medium" center>
+        <Dropdown
+          overlay={
+            <Menu>
+              <SelectableDropDownItem
+                onSelect={onSetWireFrameMode}
+                text="All"
+                selectedValue={wireFrameMode}
+                value="All"
+              />
+              <SelectableDropDownItem
+                onSelect={onSetWireFrameMode}
+                text="Selected and children"
+                selectedValue={wireFrameMode}
+                value="SelectedAndChildren"
+              />
+              <SelectableDropDownItem
+                onSelect={onSetWireFrameMode}
+                text="Selected only"
+                selectedValue={wireFrameMode}
+                value="SelectedOnly"
+              />
+            </Menu>
+          }>
+          <Tooltip title="Wireframe Mode">
+            <Button shape="circle">
+              <PicCenterOutlined />
+            </Button>
+          </Tooltip>
+        </Dropdown>
         <Tooltip title={targetToolTip}>
           <Button
             shape="circle"
@@ -145,6 +180,31 @@ export function VisualiserControls({
   );
 }
 
+function SelectableDropDownItem<T>({
+  value,
+  selectedValue,
+  onSelect,
+  text,
+}: {
+  value: T;
+  selectedValue: T;
+  onSelect: (value: T) => void;
+  text: string;
+}) {
+  return (
+    <Menu.Item
+      style={{
+        color:
+          value === selectedValue ? theme.primaryColor : theme.textColorActive,
+      }}
+      onClick={() => {
+        onSelect(value);
+      }}>
+      {text}
+    </Menu.Item>
+  );
+}
+
 const debouncedReportTargetAdjusted = debounce(() => {
   tracker.track('target-mode-adjusted', {});
 }, 500);