(server) Make Multiple Selector Collapsable

Summary: per title

Reviewed By: mweststrate

Differential Revision: D21214900

fbshipit-source-id: 61e565391ca7d5796bb22c9ece76ea5dabe97be7

desktop/plugins/layout/MultipleSelectionSection.tsx

@@ -13,6 +13,7 @@ import {
   Element,
   ElementID,
   ElementsInspector,
+  Glyph,
   colors,
   styled,
 } from 'flipper';
@@ -38,6 +39,12 @@ const MultipleSelectorSectionTitle = styled(FlexBox)({
   textAlign: 'center',
 });
 
+const Chevron = styled(Glyph)({
+  marginRight: 4,
+  marginLeft: -2,
+  marginBottom: 1,
+});
+
 type MultipleSelectorSectionProps = {
   initialSelectedElement: ElementID | null | undefined;
   elements: {[id: string]: Element};
@@ -59,11 +66,17 @@ const MultipleSelectorSection: React.FC<MultipleSelectorSectionProps> = memo(
     const [selectedId, setSelectedId] = useState<ElementID | null | undefined>(
       initialSelectedElement,
     );
+    const [collapsed, setCollapsed] = useState(false);
     return (
       <MultipleSelectorSectionContainer>
-        <MultipleSelectorSectionTitle>
+        <MultipleSelectorSectionTitle
+          onClick={() => {
+            setCollapsed(!collapsed);
+          }}>
+          <Chevron name={collapsed ? 'chevron-up' : 'chevron-down'} size={12} />
           Multiple elements found at the target coordinates
         </MultipleSelectorSectionTitle>
+        {!collapsed && (
           <ElementsInspector
             onElementSelected={(key: string) => {
               setSelectedId(key);
@@ -76,6 +89,7 @@ const MultipleSelectorSection: React.FC<MultipleSelectorSectionProps> = memo(
             selected={selectedId}
             elements={elements}
           />
+        )}
       </MultipleSelectorSectionContainer>
     );
   },