From 0d0da3df246c277a8653252693647526c3efaf3a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20B=C3=BCchele?= <danielbuechele@fb.com>
Date: Tue, 26 Feb 2019 02:33:40 -0800
Subject: [PATCH] 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 | 24 ++++++++++++++++--------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/plugins/layout/layout2/index.js b/src/plugins/layout/layout2/index.js
index 0131142e2..180b4a508 100644
--- a/src/plugins/layout/layout2/index.js
+++ b/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
-                {...inspectorProps}
-                onSelect={selectedElement => this.setState({selectedElement})}
-                showsSidebar={!this.state.inAXMode}
-              />
-              {this.state.inAXMode && (
-                <Sidebar position="right" width={400}>
+              {this.state.inAXMode ? (
+                <>
+                  <Sidebar position="left" maxWidth={Infinity}>
+                    {inspector}
+                  </Sidebar>
                   <Inspector
                     {...inspectorProps}
                     onSelect={selectedAXElement =>
@@ -187,7 +193,9 @@ export default class Layout extends FlipperPlugin<State, void, PersistedState> {
                     showsSidebar={true}
                     ax
                   />
-                </Sidebar>
+                </>
+              ) : (
+                inspector
               )}
             </FlexRow>
             <DetailSidebar>