sidebar

Summary: Before, the a11y inspector was in a sidebar. This changes the actual view hierarchy to be in a sidebar on the left side. This doesn't make an actual difference for the user, but helps to fix the scrolling issues in D14209815

Reviewed By: jknoxville

Differential Revision: D14209812

fbshipit-source-id: 414e8fd34c889cdce2dd3776727dd4a3a59efeb5

src/plugins/layout/layout2/index.js

@@ -135,6 +135,14 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
       element = this.props.persistedState.elements[this.state.selectedElement];
     }
 
+    const inspector = (
+      <Inspector
+        {...inspectorProps}
+        onSelect={selectedElement => this.setState({selectedElement})}
+        showsSidebar={!this.state.inAXMode}
+      />
+    );
+
     return (
       <FlexColumn grow={true}>
         {this.state.init && (
@@ -172,13 +180,11 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
             </Toolbar>
 
             <FlexRow grow={true}>
-              <Inspector
+              {this.state.inAXMode ? (
-                {...inspectorProps}
+                <>
-                onSelect={selectedElement => this.setState({selectedElement})}
+                  <Sidebar position="left" maxWidth={Infinity}>
-                showsSidebar={!this.state.inAXMode}
+                    {inspector}
-              />
+                  </Sidebar>
-              {this.state.inAXMode && (
-                <Sidebar position="right" width={400}>
                   <Inspector
                     {...inspectorProps}
                     onSelect={selectedAXElement =>
@@ -187,7 +193,9 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
                     showsSidebar={true}
                     ax
                   />
-                </Sidebar>
+                </>
+              ) : (
+                inspector
               )}
             </FlexRow>
             <DetailSidebar>