Small updates to Layout Extension code (committing to keep separate from larger changes)

Summary: Changed AXVisible checking, added AX specific hover

Reviewed By: danielbuechele

Differential Revision: D8795383

fbshipit-source-id: bb10b9e860629cfd385d97e79587c76460b516bc

src/plugins/layout/index.js

@@ -25,7 +25,10 @@ import {
   VerticalRule,
 } from 'sonar';
 
-import {AXElementsInspector} from '../../fb-stubs/AXLayoutExtender.js';
+import {
+  AXElementsInspector,
+  AXToggleButtonEnabled,
+} from '../../fb-stubs/AXLayoutExtender.js';
 
 // $FlowFixMe
 import debounce from 'lodash.debounce';
@@ -252,7 +255,6 @@ export default class Layout extends SonarPlugin<InspectorState> {
           ...element,
         };
       }
-
       return {AXelements: updatedElements};
     },
 
@@ -399,22 +401,27 @@ export default class Layout extends SonarPlugin<InspectorState> {
       });
     });
 
-    this.client.call('getRoot').then((element: Element) => {
-      this.dispatchAction({elements: [element], type: 'UpdateAXElements'});
-      this.dispatchAction({root: element.id, type: 'SetAXRoot'});
-      this.performInitialExpand(element, true).then(() => {
-        this.setState({AXinitialised: true});
+    if (AXToggleButtonEnabled) {
+      this.client.call('getRoot').then((element: Element) => {
+        this.dispatchAction({elements: [element], type: 'UpdateAXElements'});
+        this.dispatchAction({root: element.id, type: 'SetAXRoot'});
+        this.performInitialExpand(element, true).then(() => {
+          this.setState({AXinitialised: true});
+        });
       });
-    });
+    }
 
     this.client.subscribe(
       'invalidate',
       ({nodes}: {nodes: Array<{id: ElementID}>}) => {
         this.invalidate(nodes.map(node => node.id)).then(
           (elements: Array<Element>) => {
-            this.dispatchAction({elements, type: 'UpdateElements'});
-            // to be removed once trees are separate - will have own invalidate
-            this.dispatchAction({elements, type: 'UpdateAXElements'});
+            if (this.state.inAXMode) {
+              // to be removed once trees are separate - will have own invalidate
+              this.dispatchAction({elements, type: 'UpdateAXElements'});
+            } else {
+              this.dispatchAction({elements, type: 'UpdateElements'});
+            }
           },
         );
       },
@@ -445,10 +452,13 @@ export default class Layout extends SonarPlugin<InspectorState> {
       return Promise.resolve([]);
     }
 
-    return this.getNodes(ids, true, false).then((elements: Array<Element>) => {
+    const ax = this.state.inAXMode;
+    return this.getNodes(ids, true, ax).then((elements: Array<Element>) => {
       const children = elements
         .filter(element => {
-          const prev = this.state.elements[element.id];
+          const prev = (ax ? this.state.AXelements : this.state.elements)[
+            element.id
+          ];
           return prev && prev.expanded;
         })
         .map(element => element.children)
@@ -462,7 +472,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
 
   getNodesAndDirectChildren(
     ids: Array<ElementID>,
-    ax: boolean,
+    ax: boolean, // always false at the moment bc only used for select
   ): Promise<Array<Element>> {
     return this.getNodes(ids, false, ax).then((elements: Array<Element>) => {
       const children = elements
@@ -630,6 +640,10 @@ export default class Layout extends SonarPlugin<InspectorState> {
     this.client.send('setHighlighted', {id: key});
   });
 
+  onAXElementHovered = debounce((key: ?ElementID) => {
+    this.client.send('setHighlighted', {id: key});
+  });
+
   onDataValueChanged = (path: Array<string>, value: any) => {
     const selected = this.state.inAXMode
       ? this.state.AXselected
@@ -683,20 +697,6 @@ export default class Layout extends SonarPlugin<InspectorState> {
       outstandingSearchQuery,
     } = this.state;
 
-    const AXInspector = (
-      <AXElementsInspector
-        onElementSelected={this.onAXElementSelected}
-        onElementHovered={this.onElementHovered}
-        onElementExpanded={this.onAXElementExpanded}
-        onValueChanged={this.onDataValueChanged}
-        selected={AXselected}
-        searchResults={this.state.searchResults}
-        root={AXroot}
-        elements={AXelements}
-      />
-    );
-    const AXButtonVisible = AXInspector !== null;
-
     return (
       <FlexColumn fill={true}>
         <Toolbar>
@@ -715,7 +715,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
               }
             />
           </SearchIconContainer>
-          {AXButtonVisible ? (
+          {AXToggleButtonEnabled ? (
             <SearchIconContainer
               onClick={this.onToggleAccessibility}
               role="button"
@@ -760,7 +760,18 @@ export default class Layout extends SonarPlugin<InspectorState> {
             </Center>
           )}
           {AXinitialised && inAXMode ? <VerticalRule /> : null}
-          {AXinitialised && inAXMode ? AXInspector : null}
+          {AXinitialised && inAXMode ? (
+            <AXElementsInspector
+              onElementSelected={this.onAXElementSelected}
+              onElementHovered={this.onAXElementHovered}
+              onElementExpanded={this.onAXElementExpanded}
+              onValueChanged={this.onDataValueChanged}
+              selected={AXselected}
+              searchResults={null}
+              root={AXroot}
+              elements={AXelements}
+            />
+          ) : null}
         </FlexRow>
         <SonarSidebar>{this.renderSidebar()}</SonarSidebar>
       </FlexColumn>