remove virtualization

Summary:
Removing the virtualization in the elements inspector. This didn't really make sense here, because usually the inspector renders 10-1000 rows, which can be easily done in the browser. Having virtualization here, caused some problems with icons flickering and scrolling being broken.

Let's make it less complex and just remove the virtualization!

Reviewed By: jknoxville

Differential Revision: D14209815

fbshipit-source-id: 115d3ed57a1ccdbc20108636ff4fc7fc68e6c9c0

src/ui/components/elements-inspector/elements.js

@@ -20,8 +20,6 @@ import {colors} from '../colors.js';
 import Text from '../Text.js';
 import styled from '../../styled/index.js';
 import {clipboard} from 'electron';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import {FixedSizeList as List} from 'react-window';
 
 const ROW_HEIGHT = 23;
 
@@ -124,7 +122,7 @@ class PartialHighlight extends PureComponent<{
   content: string,
 }> {
   static HighlightedText = styled('span')(({selected}) => ({
-    backgroundColor: '#ffff33',
+    backgroundColor: colors.lemon,
     color: selected ? `${colors.grapeDark3} !important` : 'auto',
   }));
 
@@ -206,7 +204,7 @@ type ElementsRowProps = {
   onElementExpanded: (key: ElementID, deep: boolean) => void,
   childrenCount: number,
   onElementHovered: ?(key: ?ElementID) => void,
-  style: ?Object,
+  style?: Object,
   contextMenuExtensions: Array<ContextMenuExtension>,
 };
 
@@ -555,7 +553,7 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
     }
   };
 
-  buildRow = ({index, style}: {index: number, style: Object}) => {
+  buildRow = (row: FlatElement, index: number) => {
     const {
       elements,
       onElementExpanded,
@@ -567,7 +565,6 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
       contextMenuExtensions,
     } = this.props;
     const {flatElements} = this.state;
-    const row = flatElements[index];
 
     let childrenCount = 0;
     for (let i = index + 1; i < flatElements.length; i++) {
@@ -603,29 +600,16 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
         element={row.element}
         elements={elements}
         childrenCount={childrenCount}
-        style={style}
         contextMenuExtensions={contextMenuExtensions || []}
       />
     );
   };
 
   render() {
-    const items = this.state.flatElements;
-
     return (
       <ElementsBox>
         <ElementsContainer tabIndex="0" onKeyDown={this.onKeyDown}>
-          <AutoSizer>
-            {({width, height}) => (
-              <List
-                itemCount={items.length}
-                itemSize={ROW_HEIGHT}
-                width={width}
-                height={height}>
-                {e => this.buildRow(e)}
-              </List>
-            )}
-          </AutoSizer>
+          {this.state.flatElements.map(this.buildRow)}
         </ElementsContainer>
       </ElementsBox>
     );