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: {