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/flipper-plugin/src/ui/elements-inspector/ElementsInspector.tsx

@@ -10,6 +10,7 @@
 import {Component} from 'react';
 import {Elements, DecorateRow, ContextMenuExtension} from './elements';
 import React from 'react';
+import {Layout} from '../Layout';
 
 export type ElementID = string;
 
@@ -72,11 +73,16 @@ export type ElementsInspectorProps = {
   alternateRowColor?: boolean;
   contextMenuExtensions?: () => Array<ContextMenuExtension>;
   decorateRow?: DecorateRow;
+  /**
+   * By default the ElementsInspector takes all available space and is scrollab.e
+   */
+  scrollable?: boolean;
 };
 
 export class ElementsInspector extends Component<ElementsInspectorProps> {
   static defaultProps = {
     alternateRowColor: true,
+    scrollable: true,
   };
   render() {
     const {
@@ -91,9 +97,10 @@ export class ElementsInspector extends Component<ElementsInspectorProps> {
       alternateRowColor,
       contextMenuExtensions,
       decorateRow,
+      scrollable,
     } = this.props;
 
-    return (
+    const renderedElems = (
       <Elements
         onElementExpanded={onElementExpanded}
         onElementSelected={onElementSelected}
@@ -108,5 +115,10 @@ export class ElementsInspector extends Component<ElementsInspectorProps> {
         decorateRow={decorateRow}
       />
     );
+    if (scrollable) {
+      return <Layout.ScrollContainer>{renderedElems}</Layout.ScrollContainer>;
+    } else {
+      return renderedElems;
+    }
   }
 }

desktop/flipper-plugin/src/ui/elements-inspector/elements.tsx

@@ -449,8 +449,6 @@ function containsKeyInSearchResults(
 const ElementsContainer = styled('div')({
   display: 'table',
   backgroundColor: theme.backgroundDefault,
-  minHeight: '100%',
-  minWidth: '100%',
 });
 ElementsContainer.displayName = 'Elements:ElementsContainer';
 
@@ -489,7 +487,6 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
   static defaultProps = {
     alternateRowColor: true,
   };
-  _outerRef = React.createRef<HTMLDivElement>();
   constructor(props: ElementsProps, context: Object) {
     super(props, context);
     this.state = {
@@ -690,24 +687,14 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
   };
 
   scrollToSelectionRefHandler = (selectedRow: HTMLDivElement | null) => {
-    if (
-      !selectedRow ||
-      !this._outerRef.current ||
-      this.props.selected === this.state.scrolledElement
-    ) {
-      return;
-    }
-    this.setState({scrolledElement: this.props.selected});
-    const outer = this._outerRef.current;
-    if (outer.scrollTo) {
-      outer.scrollTo({
-        top: this._calculateScrollTop(
-          outer.offsetHeight,
-          outer.scrollTop,
-          selectedRow.offsetHeight,
-          selectedRow.offsetTop,
-        ),
+    if (selectedRow && this.state.scrolledElement !== this.props.selected) {
+      // second child is the element containing the element name
+      // by scrolling to the second element, we make sure padding is addressed and we scroll horizontally as well
+      selectedRow?.children[1]?.scrollIntoView?.({
+        block: 'center',
+        inline: 'center',
       });
+      this.setState({scrolledElement: this.props.selected});
     }
   };
 
@@ -761,7 +748,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
         contextMenuExtensions={contextMenuExtensions}
         decorateRow={decorateRow}
         forwardedRef={
-          selected == row.key && this.state.scrolledElement !== selected
+          selected == row.key // && this.state.scrolledElement !== selected
             ? this.scrollToSelectionRefHandler
             : null
         }
@@ -771,11 +758,9 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
 
   render() {
     return (
-      <Layout.ScrollContainer ref={this._outerRef}>
-        <ElementsContainer onKeyDown={this.onKeyDown} tabIndex={0}>
-          {this.state.flatElements.map(this.buildRow)}
-        </ElementsContainer>
-      </Layout.ScrollContainer>
+      <ElementsContainer onKeyDown={this.onKeyDown} tabIndex={0}>
+        {this.state.flatElements.map(this.buildRow)}
+      </ElementsContainer>
     );
   }
 }