Improve multiple element selector UI

Summary:
Layer selection is pretty easy to miss, as reported in for example: https://fb.workplace.com/groups/flippersupport/permalink/1098169193997071/

Moved the layer selection to the top of the view and gave it some highlighting + dynamic height. The section is no longer collapsible.

Changelog: [Layout] Make the layer selection more prominent

Reviewed By: priteshrnandgaonkar

Differential Revision: D27708650

fbshipit-source-id: c86a55c3a20794aee86e64b6766b2ca4dd6b563f

desktop/plugins/public/layout/Inspector.tsx

@@ -13,19 +13,13 @@ import {
   PluginClient,
   ElementsInspector,
   ElementSearchResultSet,
-  FlexColumn,
-  styled,
 } from 'flipper';
 import {debounce} from 'lodash';
 import {Component} from 'react';
 import {PersistedState, ElementMap} from './';
 import React from 'react';
 import MultipleSelectorSection from './MultipleSelectionSection';
-
-const ElementsInspectorContainer = styled(FlexColumn)({
-  width: '100%',
-  justifyContent: 'space-between',
-});
+import {Layout} from 'flipper-plugin';
 
 type GetNodesOptions = {
   force?: boolean;
@@ -448,7 +442,17 @@ export default class Inspector extends Component<Props, State> {
       : this.state.elementSelector;
 
     return this.root() ? (
-      <ElementsInspectorContainer>
+      <Layout.Top>
+        {selectorData && selectorData.leaves.length > 1 ? (
+          <MultipleSelectorSection
+            initialSelectedElement={this.selected()}
+            elements={selectorData.elements}
+            onElementSelected={this.onElementSelectedAndExpanded}
+            onElementHovered={this.onElementHovered}
+          />
+        ) : (
+          <div />
+        )}
         <ElementsInspector
           onElementSelected={this.onElementSelectedAtMainSection}
           onElementHovered={this.onElementHovered}
@@ -460,15 +464,7 @@ export default class Inspector extends Component<Props, State> {
           focused={this.focused()}
           contextMenuExtensions={this.getAXContextMenuExtensions}
         />
-        {selectorData && selectorData.leaves.length > 1 ? (
-          <MultipleSelectorSection
-            initialSelectedElement={this.selected()}
-            elements={selectorData.elements}
-            onElementSelected={this.onElementSelectedAndExpanded}
-            onElementHovered={this.onElementHovered}
-          />
-        ) : null}
-      </ElementsInspectorContainer>
+      </Layout.Top>
     ) : null;
   }
 }