From a4933373b52acecaa997a1c8ba7bebc829ee9a09 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Mon, 25 Sep 2023 02:02:26 -0700
Subject: [PATCH] accessability toggle button

Summary:
Should be more discoverable

changelog: UIDebugger accessibility mode for iOS launched, look for icon to the right of the search bar

Reviewed By: zats

Differential Revision: D49547952

fbshipit-source-id: 3befdffedb34907d9824bb66b86e20fd4a1a42ff
---
 .../components/tree/TreeControls.tsx          | 65 +++++++++----------
 1 file changed, 29 insertions(+), 36 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
index 2c2781ce4..693225c16 100644
--- a/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
@@ -18,22 +18,20 @@ import {
   Space,
   Switch,
   Badge,
-  Dropdown,
 } from 'antd';
+import {Glyph} from 'flipper';
 import {
   EyeOutlined,
   PauseCircleOutlined,
-  AppstoreOutlined,
   PlayCircleOutlined,
   SearchOutlined,
 } from '@ant-design/icons';
-import {usePlugin, useValue, Layout} from 'flipper-plugin';
+import {usePlugin, useValue, Layout, theme} from 'flipper-plugin';
 import {FrameworkEventMetadata, FrameworkEventType} from '../../ClientTypes';
 import {
   buildTreeSelectData,
   FrameworkEventsTreeSelect,
 } from '../shared/FrameworkEventsTreeSelect';
-import {TraversalMode} from '../../DesktopTypes';
 
 export const TreeControls: React.FC = () => {
   const instance = usePlugin(plugin);
@@ -56,43 +54,11 @@ export const TreeControls: React.FC = () => {
   const supportedTraversalModes = useValue(
     instance.uiState.supportedTraversalModes,
   );
-  const labelForMode = (mode: TraversalMode) => {
-    switch (mode) {
-      case 'view-hierarchy':
-        return 'UI Hierarchy';
-      case 'accessibility-hierarchy':
-        return 'Accessibility Hierarchy';
-    }
-  };
 
   const isConnected = useValue(instance.uiState.isConnected);
 
-  const menus = supportedTraversalModes.map((mode) => ({
-    key: mode,
-    label: labelForMode(mode),
-  }));
-
   return (
     <Layout.Horizontal gap="medium" pad="medium">
-      {supportedTraversalModes.length > 1 ? (
-        <Dropdown
-          disabled={!isConnected}
-          menu={{
-            selectable: true,
-            selectedKeys: [currentTraversalMode],
-            items: menus,
-            onSelect: async (event) => {
-              const mode = event.selectedKeys[0] as TraversalMode;
-              instance.uiActions.onSetTraversalMode(mode); // update UI
-            },
-          }}>
-          <Tooltip title={isConnected ? 'Debugger Mode' : 'App disconnected'}>
-            <Button disabled={!isConnected} shape="circle">
-              <AppstoreOutlined />
-            </Button>
-          </Tooltip>
-        </Dropdown>
-      ) : null}
       <Input
         value={searchTerm}
         onChange={(e) => {
@@ -111,6 +77,33 @@ export const TreeControls: React.FC = () => {
             {isPaused ? <PlayCircleOutlined /> : <PauseCircleOutlined />}
           </Tooltip>
         }></Button>
+      {supportedTraversalModes.length > 1 &&
+        supportedTraversalModes.includes('accessibility-hierarchy') && (
+          <Tooltip title="Accessibility mode">
+            <Button
+              disabled={!isConnected}
+              shape="circle"
+              onClick={() => {
+                if (currentTraversalMode === 'accessibility-hierarchy') {
+                  instance.uiActions.onSetTraversalMode('view-hierarchy');
+                } else {
+                  instance.uiActions.onSetTraversalMode(
+                    'accessibility-hierarchy',
+                  );
+                }
+              }}>
+              <Glyph
+                name={'accessibility'}
+                size={16}
+                color={
+                  currentTraversalMode === 'accessibility-hierarchy'
+                    ? theme.primaryColor
+                    : theme.textColorPrimary
+                }
+              />
+            </Button>
+          </Tooltip>
+        )}
       {frameworkEventMonitoring.size > 0 && (
         <>
           <Badge