rename controls to tree controls and consistent button style

Reviewed By: mweststrate

Differential Revision: D47672437

fbshipit-source-id: 5ce237cfd300a481450411a0242410e01bcc5411

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

@@ -22,7 +22,7 @@ import {Id, Metadata, MetadataId, ClientNode} from '../ClientTypes';
 import {PerfStats} from './PerfStats';
 import {Visualization2D} from './visualizer/Visualization2D';
 import {Inspector} from './sidebar/Inspector';
-import {Controls} from './Controls';
+import {TreeControls} from './tree/TreeControls';
 import {Button, Spin} from 'antd';
 import {QueryClientProvider} from 'react-query';
 import {Tree2} from './tree/Tree';
@@ -118,7 +118,7 @@ export function Component() {
             borderRadius: theme.borderRadius,
             backgroundColor: theme.backgroundDefault,
           }}>
-          <Controls />
+          <TreeControls />
           <Tree2 nodes={nodes} rootId={rootId} />
         </Layout.Container>
 

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

@@ -8,7 +8,7 @@
  */
 
 import React, {useState} from 'react';
-import {plugin} from '../index';
+import {plugin} from '../../index';
 import {
   Button,
   Input,
@@ -26,9 +26,9 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
-import {FrameworkEventType} from '../ClientTypes';
+import {FrameworkEventType} from '../../ClientTypes';
 
-export const Controls: React.FC = () => {
+export const TreeControls: React.FC = () => {
   const instance = usePlugin(plugin);
   const searchTerm = useValue(instance.uiState.searchTerm);
   const isPaused = useValue(instance.uiState.isPaused);

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

@@ -87,6 +87,7 @@ export function VisualiserControls({
       <Layout.Horizontal gap="medium">
         <Tooltip title={targetToolTip}>
           <Button
+            shape="circle"
             onClick={() => {
               if (targetMode.state === 'disabled') {
                 setTargetMode({state: 'active'});
@@ -108,6 +109,7 @@ export function VisualiserControls({
         </Tooltip>
         <Tooltip title={focusToolTip}>
           <Button
+            shape="circle"
             disabled={focusDisabled}
             onClick={() => {
               if (focusedNode == null) {