Remove ctrl to stop drawing children

Summary: This feature is annoying and useless

Reviewed By: antonk52

Differential Revision: D45696921

fbshipit-source-id: 01c007d3e196a7511b940b7973bb8e6a880e27e5

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

@@ -22,9 +22,8 @@ export const Visualization2D: React.FC<
     width: number;
     nodes: Map<Id, UINode>;
     onSelectNode: (id?: Id) => void;
-    modifierPressed: boolean;
   } & React.HTMLAttributes<HTMLDivElement>
-> = ({width, nodes, onSelectNode, modifierPressed}) => {
+> = ({width, nodes, onSelectNode}) => {
   const rootNodeRef = useRef<HTMLDivElement>();
   const instance = usePlugin(plugin);
 
@@ -148,7 +147,6 @@ export const Visualization2D: React.FC<
           <MemoedVisualizationNode2D
             node={focusState.focusedRoot}
             onSelectNode={onSelectNode}
-            modifierPressed={modifierPressed}
           />
         </div>
       </div>
@@ -159,19 +157,15 @@ export const Visualization2D: React.FC<
 const MemoedVisualizationNode2D = React.memo(
   Visualization2DNode,
   (prev, next) => {
-    return (
-      prev.node === next.node && prev.modifierPressed === next.modifierPressed
-    );
+    return prev.node === next.node;
   },
 );
 
 function Visualization2DNode({
   node,
   onSelectNode,
-  modifierPressed,
 }: {
   node: NestedNode;
-  modifierPressed: boolean;
   onSelectNode: (id?: Id) => void;
 }) {
   const instance = usePlugin(plugin);
@@ -200,18 +194,11 @@ function Visualization2DNode({
     nestedChildren = node.children;
   }
 
-  // stop drawing children if hovered with the modifier so you
-  // can see parent views without their children getting in the way
-  if (isHovered && modifierPressed) {
-    nestedChildren = [];
-  }
-
   const children = nestedChildren.map((child) => (
     <MemoedVisualizationNode2D
       key={child.id}
       node={child}
       onSelectNode={onSelectNode}
-      modifierPressed={modifierPressed}
     />
   ));
 

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -21,7 +21,6 @@ import {useHotkeys} from 'react-hotkeys-hook';
 import {Id, Metadata, MetadataId, UINode} from '../types';
 import {PerfStats} from './PerfStats';
 import {Visualization2D} from './Visualization2D';
-import {useKeyboardModifiers} from '../hooks/useKeyboardModifiers';
 import {Inspector} from './sidebar/Inspector';
 import {Controls} from './Controls';
 import {Button, Spin} from 'antd';
@@ -41,8 +40,6 @@ export function Component() {
 
   useHotkeys('ctrl+i', () => setShowPerfStats((show) => !show));
 
-  const {ctrlPressed} = useKeyboardModifiers();
-
   const [bottomPanelComponent, setBottomPanelComponent] = useState<
     ReactNode | undefined
   >();
@@ -104,7 +101,6 @@ export function Component() {
                       width={visualiserWidth}
                       nodes={nodes}
                       onSelectNode={instance.uiActions.onSelectNode}
-                      modifierPressed={ctrlPressed}
                     />
                   </Layout.ScrollContainer>
                 </ResizablePanel>

desktop/plugins/public/ui-debugger/hooks/useKeyboardModifiers.tsx

@@ -1,29 +0,0 @@
-/**
- * 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 {useEffect, useState} from 'react';
-
-export function useKeyboardModifiers() {
-  const [state, setState] = useState({altPressed: false, ctrlPressed: false});
-
-  function handler(event: KeyboardEvent) {
-    setState({altPressed: event.altKey, ctrlPressed: event.ctrlKey});
-  }
-
-  useEffect(() => {
-    window.addEventListener('keydown', handler);
-    window.addEventListener('keyup', handler);
-    return () => {
-      window.removeEventListener('keydown', handler);
-      window.removeEventListener('keyup', handler);
-    };
-  }, []);
-
-  return state;
-}