Make Elements panel feel less cluttered (facebook#1091)

Reimagined Settings, TreeView, and Node components.:
* Redesigned toolbar to focus more on search and remove clutter
* Move "highlight-updates" and "highlight-search" options into settings panel
* Changed attribute filtering logic to show all attributes of type number/string/bool and filter others
* Elements tree nodes wrap now for better readability
* Breadcrumbs doesn't wrap, but scrolls horizontally, to take up less space
* Margins and paddings tweaked

Author: bvaughn

.gitignore

@@ -6,4 +6,5 @@ node_modules
 npm-debug.log
 yarn-error.log
 .DS_Store
+yarn-error.log
 

frontend/Breadcrumb.js

@@ -34,12 +34,26 @@ type State ={
 
 class Breadcrumb extends React.Component<Props, State> {
   context: {theme: Theme};
+  // $FlowFixMe createRef()
+  selectedListItem = React.createRef();
 
   constructor(props) {
     super(props);
     this.state = { hovered: null };
   }
 
+  componentDidMount() {
+    if (this.props.selected) {
+      this.ensureInView();
+    }
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (this.props.selected !== prevProps.selected) {
+      this.ensureInView();
+    }
+  }
+
   handleCrumbMouseOver(id) {
     this.setState({ hovered: id });
     this.props.hover(id, true);
@@ -51,11 +65,13 @@ class Breadcrumb extends React.Component<Props, State> {
   }
 
   render() {
-    var theme = this.context.theme;
+    const {theme} = this.context;
+    const {path, selected} = this.props;
+
     return (
       <ul style={containerStyle(theme)}>
-        {this.props.path.map(({ id, node }) => {
-          const isSelected = id === this.props.selected;
+        {path.map(({ id, node }) => {
+          const isSelected = id === selected;
           const style = itemStyle(
             isSelected,
             node.get('nodeType'),
@@ -69,6 +85,7 @@ class Breadcrumb extends React.Component<Props, State> {
               onMouseOver={() => this.handleCrumbMouseOver(id)}
               onMouseOut={() => this.handleCrumbMouseOut(id)}
               onClick={isSelected ? null : () => this.props.select(id)}
+              ref={isSelected ? this.selectedListItem : undefined}
             >
               {node.get('name') || '"' + node.get('text') + '"'}
             </li>
@@ -77,6 +94,21 @@ class Breadcrumb extends React.Component<Props, State> {
       </ul>
     );
   }
+
+  ensureInView() {
+    const selectedListItem = this.selectedListItem.current;
+    if (selectedListItem != null) {
+      if (typeof selectedListItem.scrollIntoViewIfNeeded === 'function') {
+        selectedListItem.scrollIntoViewIfNeeded({
+          inline: 'nearest',
+        });
+      } else if (typeof selectedListItem.scrollIntoView === 'function') {
+        selectedListItem.scrollIntoView({
+          inline: 'nearest',
+        });
+      }
+    }
+  }
 }
 
 Breadcrumb.contextTypes = {
@@ -86,13 +118,13 @@ Breadcrumb.contextTypes = {
 const containerStyle = (theme: Theme) => ({
   fontFamily: sansSerif.family,
   listStyle: 'none',
-  padding: 0,
+  padding: '0 0.5rem',
   margin: 0,
   maxHeight: '80px',
-  overflow: 'auto',
-  marginTop: '2px',
   backgroundColor: theme.base01,
   borderTop: `1px solid ${theme.base03}`,
+  whiteSpace: 'nowrap',
+  overflow: 'auto',
 });
 
 const itemStyle = (isSelected: boolean, nodeType: string, theme: Theme) => {
@@ -114,7 +146,6 @@ const itemStyle = (isSelected: boolean, nodeType: string, theme: Theme) => {
     MozUserSelect: 'none',
     userSelect: 'none',
     display: 'inline-block',
-    marginRight: '2px',
   };
 };
 

frontend/DataView/DataView.js

@@ -12,7 +12,6 @@
 
 import type {Theme, DOMEvent} from '../types';
 
-const {sansSerif} = require('../Themes/Fonts');
 const PropTypes = require('prop-types');
 const React = require('react');
 const Simple = require('./Simple');
@@ -317,51 +316,44 @@ function alphanumericSort(a: string, b: string): number {
 const nameStyle = (isComplex: boolean, theme: Theme) => ({
   cursor: isComplex ? 'pointer' : 'default',
   color: theme.special03,
-  margin: '2px 3px',
+  margin: '0 0.25rem',
 });
 
 const previewStyle = (theme: Theme) => ({
   display: 'flex',
-  margin: '2px 3px',
   whiteSpace: 'pre',
   wordBreak: 'break-word',
   flex: 1,
   color: theme.special01,
 });
 
 const emptyStyle = (theme: Theme) => ({
-  marginLeft: '0.75rem',
-  padding: '0 5px',
+  lineHeight: '1.25rem',
   color: theme.base04,
-  fontFamily: sansSerif.family,
-  fontSize: sansSerif.sizes.normal,
-  fontStyle: 'italic',
+  paddingLeft: '1rem',
 });
 
 const missingStyle = (theme: Theme) => ({
-  fontSize: sansSerif.sizes.normal,
   fontWeight: 'bold',
-  marginLeft: '0.75rem',
-  padding: '2px 5px',
+  lineHeight: '1.25rem',
   color: theme.base03,
+  paddingLeft: '1rem',
 });
 
 const collapsedArrowStyle = (theme: Theme) => ({
   borderColor: `transparent transparent transparent ${theme.base03}`,
   borderStyle: 'solid',
-  borderWidth: '4px 0 4px 7px',
+  borderWidth: '4px 0 4px 6px',
   display: 'inline-block',
-  marginLeft: 1,
-  verticalAlign: 'top',
+  verticalAlign: 'middle',
 });
 
 const expandedArrowStyle = (theme: Theme) => ({
   borderColor: `${theme.base03} transparent transparent transparent`,
   borderStyle: 'solid',
-  borderWidth: '7px 4px 0 4px',
+  borderWidth: '6px 4px 0 4px',
   display: 'inline-block',
-  marginTop: 1,
-  verticalAlign: 'top',
+  verticalAlign: 'middle',
 });
 
 const sparseArrayHoleStyle = (theme: Theme) => ({
@@ -384,9 +376,7 @@ var styles = {
   opener: {
     cursor: 'pointer',
     marginLeft: -10,
-    paddingRight: 3,
     position: 'absolute',
-    top: 4,
   },
 
   toggler: {
@@ -398,6 +388,7 @@ var styles = {
   head: {
     display: 'flex',
     position: 'relative',
+    lineHeight: '1.25rem',
   },
 
   value: {