Accessibility Inspector open-sourcing move and documentation

Summary: Replaces AXElementsInpector with normal inspector implementation, removes gating from external builds. Adds documentation to https://fbflipper.com/docs/layout-plugin.html.

Reviewed By: passy

Differential Revision: D9438713

fbshipit-source-id: 18616c6cbab339bf474d116cac128e1d4a5fc2be

src/fb-stubs/AXLayoutExtender.js

@@ -1,34 +0,0 @@
-/**
- * Copyright 2018-present Facebook.
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * @format
- */
-
-import {Component} from 'react';
-import type {
-  Element,
-  ElementID,
-  ElementSearchResultSet,
-  ContextMenuExtension,
-} from 'sonar';
-
-export class AXElementsInspector extends Component<{
-  onElementExpanded: (key: ElementID, deep: boolean) => void,
-  onElementSelected: (key: ElementID) => void,
-  onElementHovered: ?(key: ?ElementID) => void,
-  onValueChanged: ?(path: Array<string>, val: any) => void,
-  selected: ?ElementID,
-  focused: ?ElementID,
-  searchResults?: ?ElementSearchResultSet,
-  root: ?ElementID,
-  elements: {[key: ElementID]: Element},
-  useAppSidebar?: boolean,
-  contextMenuExtensions: Array<ContextMenuExtension>,
-}> {
-  render() {
-    return null;
-  }
-}
-
-export const AXToggleButtonEnabled: boolean = false;

src/plugins/layout/index.js

@@ -28,11 +28,6 @@ import {
 import type {TrackType} from '../../fb-stubs/Logger.js';
 import SidebarExtensions from '../../fb-stubs/LayoutInspectorSidebarExtensions.js';
 
-import {
-  AXElementsInspector,
-  AXToggleButtonEnabled,
-} from '../../fb-stubs/AXLayoutExtender.js';
-
 // $FlowFixMe
 import debounce from 'lodash.debounce';
 
@@ -468,7 +463,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
 
   axEnabled(): boolean {
     // only visible internally for Android clients
-    return AXToggleButtonEnabled && this.realClient.query.os === 'Android';
+    return this.realClient.query.os === 'Android';
   }
 
   // expand tree and highlight click-to-inspect node that was found
@@ -1083,14 +1078,13 @@ export default class Layout extends SonarPlugin<InspectorState> {
           )}
           {AXinitialised && inAXMode ? <VerticalRule /> : null}
           {AXinitialised && inAXMode ? (
-            <AXElementsInspector
+            <ElementsInspector
               onElementSelected={this.onElementSelected}
               onElementHovered={this.onElementHovered}
               onElementExpanded={this.onElementExpanded}
               onValueChanged={this.onDataValueChanged}
               selected={AXselected}
               focused={AXfocused}
-              searchResults={null}
               root={AXroot}
               elements={AXelements}
               contextMenuExtensions={this.getAXContextMenuExtensions()}

src/ui/components/elements-inspector/ElementsInspector.js

@@ -8,6 +8,7 @@
 import {Component} from 'react';
 import FlexRow from '../FlexRow.js';
 import {Elements} from './elements.js';
+import type {ContextMenuExtension} from 'sonar';
 
 export type ElementID = string;
 
@@ -57,11 +58,13 @@ export default class ElementsInspector extends Component<{
   onElementHovered: ?(key: ?ElementID) => void,
   onValueChanged: ?(path: Array<string>, val: any) => void,
   selected: ?ElementID,
+  focused?: ?ElementID,
   searchResults?: ?ElementSearchResultSet,
   root: ?ElementID,
   elements: {[key: ElementID]: Element},
   useAppSidebar?: boolean,
   alternateRowColor?: boolean,
+  contextMenuExtensions?: Array<ContextMenuExtension>,
 }> {
   static defaultProps = {
     alternateRowColor: true,
@@ -69,6 +72,7 @@ export default class ElementsInspector extends Component<{
   render() {
     const {
       selected,
+      focused,
       elements,
       root,
       onElementExpanded,
@@ -76,6 +80,7 @@ export default class ElementsInspector extends Component<{
       onElementHovered,
       searchResults,
       alternateRowColor,
+      contextMenuExtensions,
     } = this.props;
 
     return (
@@ -85,10 +90,12 @@ export default class ElementsInspector extends Component<{
           onElementSelected={onElementSelected}
           onElementHovered={onElementHovered}
           selected={selected}
+          focused={focused}
           searchResults={searchResults}
           root={root}
           elements={elements}
           alternateRowColor={alternateRowColor}
+          contextMenuExtensions={contextMenuExtensions}
         />
       </FlexRow>
     );