added ability to disable front end view of accessibility tree

Author: jguerrero35

src/app/components/StateRoute/StateRoute.tsx

@@ -5,13 +5,13 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable max-len */
 /* eslint-disable object-curly-newline */
-import React from 'react';
+import React, { useState } from 'react';
 import { MemoryRouter as Router, Route, NavLink, Routes, Outlet, Link } from 'react-router-dom';
 import { ParentSize } from '@visx/responsive';
 import Tree from './Tree';
 import ComponentMap from './ComponentMap/ComponentMap';
-import { changeView, changeSlider } from '../../slices/mainSlice';
-import { useSelector } from 'react-redux';
+import { changeView, changeSlider, toggleAxTree, setCurrentTabInApp } from '../../slices/mainSlice';
+import { useDispatch, useSelector } from 'react-redux';
 import PerformanceVisx from './PerformanceVisx/PerformanceVisx';
 import WebMetricsContainer from './WebMetrics/WebMetricsContainer';
 import { MainState, RootState, StateRouteProps } from '../../FrontendTypes';
@@ -35,11 +35,33 @@ const StateRoute = (props: StateRouteProps) => {
     currLocation, // from 'tabs[currentTab]' object in 'MainContainer'
   } = props;
 
+
   const { tabs, currentTab }: MainState = useSelector((state: RootState) => state.main);
   const { hierarchy: tabsHierarchy, sliderIndex, viewIndex: tabsViewIndex } = tabs[currentTab];
   const hierarchy = propsHierarchy || tabsHierarchy;
   const viewIndex = propsViewIndex || tabsViewIndex;
 
+  const dispatch = useDispatch();
+  const [showTree, setShowTree] = useState(false);
+  const [selectedValue, setSelectedValue] = useState('disable');
+  const [showParagraph, setShowParagraph] = useState(true);
+
+  const enableAxTreeButton = () => {
+    dispatch(toggleAxTree('toggleAxRecord'));
+    dispatch(setCurrentTabInApp('AxTree'));
+    setSelectedValue('enable');
+    setShowParagraph(false);
+    setShowTree(true);
+  };
+
+  const disableAxTree = () => {
+    dispatch(toggleAxTree('toggleAxRecord'));
+    setSelectedValue('disable');
+    setShowParagraph(true);
+    setShowTree(false);
+  };
+
+
   return (
     <div className='app-body'>
       <div className='navbar'>
@@ -102,7 +124,7 @@ const StateRoute = (props: StateRouteProps) => {
           <Route
             path='/accessibility'
             element={
-              hierarchy ? (
+              showTree ? (
                 <ParentSize className='componentMapContainer'>
                   {({ width, height }) => {
                     // eslint-disable-next-line react/prop-types
@@ -121,7 +143,40 @@ const StateRoute = (props: StateRouteProps) => {
                     );
                   }}
                 </ParentSize>
-              ) : null
+              ) : <div>
+              {showParagraph && (
+                <p>
+                  A Note to Developers: Reactime is using the Chrome Debugger API in order to grab the
+                  Accessibility Tree. Enabling this option will allow you to record Accessibility Tree
+                  snapshots, but will result in the Chrome browser notifying you that the Chrome Debugger
+                  has started.
+                </p>
+              )}
+              <div>
+                {
+                  <input
+                    type='radio'
+                    value='enable'
+                    checked={selectedValue === 'enable'}
+                    onChange={() => {
+                      enableAxTreeButton();
+                    }}
+                  />
+                }
+                <label htmlFor='enable'>Enable</label>
+                {
+                  <input
+                    type='radio'
+                    value='disable'
+                    checked={selectedValue === 'disable'}
+                    onChange={() => {
+                      disableAxTree();
+                    }}
+                  />
+                }
+                <label htmlFor='disable'>Disable</label>
+              </div>
+            </div>
             }
           ></Route>
           <Route

src/app/slices/mainSlice.ts

@@ -506,6 +506,15 @@ export const mainSlice = createSlice({
       state.connectRequested = false;
       state.connectionStatus = true;
     },
+
+    toggleAxTree: (state, action) => {
+      const { port, payload, tabs, currentTab} = state;
+      port.postMessage({
+        action: 'toggleAxRecord',
+        payload: action.payload,
+        tabId: currentTab,
+      })
+    }
   },
 });
 
@@ -540,4 +549,5 @@ export const {
   disconnected,
   startReconnect,
   endConnect,
+  toggleAxTree,
 } = mainSlice.actions;