A few mini-fixes for the accessibility layout inspector

Summary:
- fix mutual selection of elements in ax and non-ax tree (simplifies linkedNode logic as well)
- remove unneeded extraInfo attributes (focused, nonAXwithAXchild, & hasAXNode were not/no longer being used)
- use 50/50 fixed width view for trees when both are visible

Reviewed By: jknoxville

Differential Revision: D16390355

fbshipit-source-id: bbf9ea887f8f1035df8b4b0562ddcc4de291f004

src/plugins/layout/Inspector.js

@@ -147,26 +147,28 @@ export default class Inspector extends Component<Props> {
 
     if (
       ax &&
-      selectedElement !== prevProps.selectedElement &&
-      selectedElement
+      selectedElement &&
+      selectedElement !== prevProps.selectedElement
     ) {
-      // selected element changed, find linked AX element
-      const linkedAXNode: ?ElementID = this.props.persistedState.elements[
+      // selected element in non-AX tree changed, find linked element in AX tree
+      const newlySelectedElem = this.props.persistedState.elements[
         selectedElement
-      ]?.extraInfo?.linkedAXNode;
-      this.props.onSelect(linkedAXNode);
+      ];
+      if (newlySelectedElem) {
+        this.props.onSelect(newlySelectedElem.extraInfo?.linkedNode);
+      }
     } else if (
       !ax &&
-      selectedAXElement !== prevProps.selectedAXElement &&
-      selectedAXElement
+      selectedAXElement &&
+      selectedAXElement !== prevProps.selectedAXElement
     ) {
-      // selected AX element changed, find linked element
-      // $FlowFixMe Object.values retunes mixed type
-      const linkedNode: ?Element = Object.values(
-        this.props.persistedState.elements,
-        // $FlowFixMe it's an Element not mixed
-      ).find((e: Element) => e.extraInfo?.linkedAXNode === selectedAXElement);
-      this.props.onSelect(linkedNode?.id);
+      // selected element in AX tree changed, find linked element in non-AX tree
+      const newlySelectedAXElem = this.props.persistedState.AXelements[
+        selectedAXElement
+      ];
+      if (newlySelectedAXElem) {
+        this.props.onSelect(newlySelectedAXElem.extraInfo?.linkedNode);
+      }
     }
   }
 

src/plugins/layout/index.js

@@ -20,6 +20,7 @@ import {
   Toolbar,
   Sidebar,
   DetailSidebar,
+  VerticalRule,
 } from 'flipper';
 import Inspector from './Inspector';
 import ToolbarIcon from './ToolbarIcon';
@@ -168,6 +169,17 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
       />
     );
 
+    const axInspector = this.state.inAXMode && (
+      <Inspector
+        {...inspectorProps}
+        onSelect={selectedAXElement => this.setState({selectedAXElement})}
+        showsSidebar={true}
+        ax
+      />
+    );
+
+    const divider = this.state.inAXMode && <VerticalRule />;
+
     return (
       <FlexColumn grow={true}>
         {this.state.init && (
@@ -211,23 +223,9 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
             </Toolbar>
 
             <FlexRow grow={true}>
-              {this.state.inAXMode ? (
-                <>
-                  <Sidebar position="left" maxWidth={Infinity}>
-                    {inspector}
-                  </Sidebar>
-                  <Inspector
-                    {...inspectorProps}
-                    onSelect={selectedAXElement =>
-                      this.setState({selectedAXElement})
-                    }
-                    showsSidebar={true}
-                    ax
-                  />
-                </>
-              ) : (
-                inspector
-              )}
+              {inspector}
+              {divider}
+              {axInspector}
             </FlexRow>
             <DetailSidebar>
               <InspectorSidebar