Fix React devtools experience

Summary:
Currently most components are shown anonymously in the component tree, because using `styled` creates unnamed components, shown as the HTML elements they result in.

This has two downsides:
1. React errors / warnings are really vague and it is hard to locate where they are coming from
2. The React Devtools don't show which components are rendering.
3. The effect of the latter it is hard to copy-from-example when developing plugins. This leads to a lot of inconsitency and duplication in the layouts of components

Reviewed By: jknoxville

Differential Revision: D18503675

fbshipit-source-id: 5a9ea1765346fb4c6a49e37ffa4d0b4bbcd86587

src/plugins/fresco/__tests__/__snapshots__/index.node.tsx.snap

@@ -5,28 +5,28 @@ exports[`notifications for leaks 1`] = `
   <Styled(div)>
     CloseableReference leaked for
      
-    <Styled(span)
+    <Text
       code={true}
     >
       com.facebook.imagepipeline.memory.NativeMemoryChunk
-    </Styled(span)>
+    </Text>
     (identity hashcode: 
     deadbeef
     ).
   </Styled(div)>
   <Styled(div)>
-    <Styled(span)
+    <Text
       bold={true}
     >
       Stacktrace:
-    </Styled(span)>
+    </Text>
   </Styled(div)>
   <Styled(div)>
-    <Styled(span)
+    <Text
       code={true}
     >
       &lt;unavailable&gt;
-    </Styled(span)>
+    </Text>
   </Styled(div)>
 </React.Fragment>
 `;

src/ui/components/Block.tsx

@@ -9,6 +9,12 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+/**
+ * A Block styled div
+ */
+const Block = styled('div')({
   display: 'block',
 });
+Block.displayName = 'Block';
+
+export default Block;

src/ui/components/Box.tsx

@@ -10,9 +10,12 @@
 import FlexBox from './FlexBox';
 import styled from 'react-emotion';
 
-export default styled(FlexBox)({
+const Box = styled(FlexBox)({
   height: '100%',
   overflow: 'auto',
   position: 'relative',
   width: '100%',
 });
+Box.displayName = 'Box';
+
+export default Box;

src/ui/components/Button.tsx

@@ -185,10 +185,12 @@ const StyledButton = styled('div')(
     },
   }),
 );
+StyledButton.displayName = 'Button:StyledButton';
 
 const Icon = styled(Glyph)(({hasText}: {hasText: boolean}) => ({
   marginRight: hasText ? 3 : 0,
 }));
+Icon.displayName = 'Button:Icon';
 
 type OwnProps = {
   /**

src/ui/components/ButtonGroup.tsx

@@ -18,6 +18,7 @@ const ButtonGroupContainer = styled('div')({
     marginLeft: 0,
   },
 });
+ButtonGroupContainer.displayName = 'ButtonGroup:ButtonGroupContainer';
 
 /**
  * Group a series of buttons together.

src/ui/components/ButtonGroupChain.tsx

@@ -19,6 +19,7 @@ const IconContainer = styled('div')({
   alignItems: 'center',
   pointerEvents: 'none',
 });
+IconContainer.displayName = 'ButtonGroupChain:IconContainer';
 
 const ButtonGroupChainContainer = styled('div')(
   (props: {iconSize: number}) => ({
@@ -39,6 +40,7 @@ const ButtonGroupChainContainer = styled('div')(
     },
   }),
 );
+IconContainer.displayName = 'ButtonGroupChain:ButtonGroupChainContainer';
 
 type Props = {
   /**

src/ui/components/Checkbox.tsx

@@ -23,6 +23,7 @@ const CheckboxContainer = styled('input')({
   marginRight: 5,
   verticalAlign: 'middle',
 });
+CheckboxContainer.displayName = 'Checkbox:CheckboxContainer';
 
 /**
  * A checkbox to toggle UI state

src/ui/components/CodeBlock.tsx

@@ -9,6 +9,9 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const CodeBlock = styled('div')({
   fontFamily: 'monospace',
 });
+CodeBlock.displayName = 'CodeBlock';
+
+export default CodeBlock;

src/ui/components/ContextMenuProvider.tsx

@@ -18,6 +18,7 @@ type MenuTemplate = Array<MenuItemConstructorOptions>;
 const Container = styled('div')({
   display: 'contents',
 });
+Container.displayName = 'ContextMenuProvider:Container';
 
 /**
  * Flipper's root is already wrapped with this component, so plugins should not

src/ui/components/ErrorBlock.tsx

@@ -20,6 +20,7 @@ export const ErrorBlockContainer = styled(CodeBlock)({
   padding: 10,
   whiteSpace: 'pre',
 });
+ErrorBlockContainer.displayName = 'ErrorBlock:ErrorBlockContainer';
 
 /**
  * Displaying error messages in a red box.

src/ui/components/ErrorBoundary.tsx

@@ -19,11 +19,13 @@ const ErrorBoundaryContainer = styled(View)({
   overflow: 'auto',
   padding: 10,
 });
+ErrorBoundaryContainer.displayName = 'ErrorBoundary:ErrorBoundaryContainer';
 
 const ErrorBoundaryStack = styled(ErrorBlock)({
   marginBottom: 10,
   whiteSpace: 'pre',
 });
+ErrorBoundaryStack.displayName = 'ErrorBoundary:ErrorBoundaryStack';
 
 type ErrorBoundaryProps = {
   /** Function to dynamically generate the heading of the ErrorBox. */

src/ui/components/FlexBox.tsx

@@ -18,7 +18,10 @@ type Props = {
 /**
  * A container using flexbox to layout its children
  */
-export default styled(View)(({shrink}: Props) => ({
+const FlexBox = styled(View)(({shrink}: Props) => ({
   display: 'flex',
   flexShrink: shrink == null || shrink ? 1 : 0,
 }));
+FlexBox.displayName = 'FlexBox';
+
+export default FlexBox;

src/ui/components/FlexCenter.tsx

@@ -13,8 +13,11 @@ import styled from 'react-emotion';
 /**
  * A container displaying its children horizontally and vertically centered.
  */
-export default styled(View)({
+const FlexCenter = styled(View)({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
 });
+FlexCenter.displayName = 'FlexCenter';
+
+export default FlexCenter;

src/ui/components/FlexColumn.tsx

@@ -13,6 +13,9 @@ import styled from 'react-emotion';
 /**
  * A container displaying its children in a column
  */
-export default styled(FlexBox)({
+const FlexColumn = styled(FlexBox)({
   flexDirection: 'column',
 });
+FlexColumn.displayName = 'FlexColumn';
+
+export default FlexColumn;

src/ui/components/FlexRow.tsx

@@ -13,6 +13,9 @@ import styled from 'react-emotion';
 /**
  * A container displaying its children in a row
  */
-export default styled(FlexBox)({
+const FlexRow = styled(FlexBox)({
   flexDirection: 'row',
 });
+FlexRow.displayName = 'FlexRow';
+
+export default FlexRow;

src/ui/components/FocusableBox.tsx

@@ -22,6 +22,7 @@ const FocusableBoxBorder = styled(Box)({
   right: '0',
   top: '0',
 });
+FocusableBoxBorder.displayName = 'FocusableBox:FocusableBoxBorder';
 
 type Props = {
   onBlur?: (e: React.FocusEvent) => void;

src/ui/components/Glyph.tsx

@@ -20,6 +20,7 @@ const ColoredIconBlack = styled('img')(({size}: {size: number}) => ({
   width: size,
   flexShrink: 0,
 }));
+ColoredIconBlack.displayName = 'Glyph:ColoredIconBlack';
 
 const ColoredIconCustom = styled('div')(
   (props: {size: number; color?: string; src: string}) => ({
@@ -35,6 +36,7 @@ const ColoredIconCustom = styled('div')(
     flexShrink: 0,
   }),
 );
+ColoredIconCustom.displayName = 'Glyph:ColoredIconCustom';
 
 function ColoredIcon(
   props: {
@@ -79,7 +81,7 @@ function ColoredIcon(
     );
   }
 }
-
+ColoredIcon.displayName = 'Glyph:ColoredIcon';
 ColoredIcon.contextTypes = {
   glyphColor: PropTypes.string,
 };

src/ui/components/Heading.tsx

@@ -17,6 +17,7 @@ const LargeHeading = styled('div')({
   borderBottom: '1px solid #ddd',
   marginBottom: 10,
 });
+LargeHeading.displayName = 'Heading:LargeHeading';
 
 const SmallHeading = styled('div')({
   fontSize: 12,
@@ -25,6 +26,7 @@ const SmallHeading = styled('div')({
   marginBottom: 10,
   textTransform: 'uppercase',
 });
+SmallHeading.displayName = 'Heading:SmallHeading';
 
 /**
  * A heading component.

src/ui/components/HorizontalRule.tsx

@@ -9,8 +9,11 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const HorizontalRule = styled('div')({
   backgroundColor: '#c9ced4',
   height: 1,
   margin: '5px 0',
 });
+HorizontalRule.displayName = 'HorizontalRule';
+
+export default HorizontalRule;

src/ui/components/Input.tsx

@@ -31,6 +31,8 @@ const Input = styled('input')(({compact}: {compact?: boolean}) => ({
   padding: compact ? '0 5px' : '0 10px',
 }));
 
+Input.displayName = 'Input';
+
 Input.defaultProps = {
   type: 'text',
 };

src/ui/components/Interactive.tsx

@@ -93,6 +93,7 @@ type InteractiveState = {
 const InteractiveContainer = styled('div')({
   willChange: 'transform, height, width, z-index',
 });
+InteractiveContainer.displayName = 'Interactive:InteractiveContainer';
 
 export default class Interactive extends React.Component<
   InteractiveProps,

src/ui/components/Label.tsx

@@ -9,7 +9,10 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const Label = styled('div')({
   fontSize: 12,
   fontWeight: 'bold',
 });
+Label.displayName = 'Label';
+
+export default Label;

src/ui/components/Link.tsx

@@ -20,6 +20,7 @@ const StyledLink = styled('span')({
     textDecoration: 'underline',
   },
 });
+StyledLink.displayName = 'Link:StyledLink';
 
 export default class Link extends Component<{
   href: string;

src/ui/components/LoadingIndicator.tsx

@@ -30,6 +30,8 @@ const LoadingIndicator = styled('div')((props: {size: number}) => ({
   borderLeftColor: 'rgba(0, 0, 0, 0.4)',
 }));
 
+LoadingIndicator.displayName = 'LoadingIndicator';
+
 LoadingIndicator.defaultProps = {
   size: 50,
 };

src/ui/components/MarkerTimeline.tsx

@@ -43,6 +43,7 @@ const Markers = styled('div')((props: {totalTime: number}) => ({
     left: 5,
   },
 }));
+Markers.displayName = 'MarkerTimeline:Markers';
 
 const Point = styled(FlexRow)(
   (props: {
@@ -104,6 +105,7 @@ const Point = styled(FlexRow)(
     },
   }),
 );
+Point.displayName = 'MakerTimeline:Point';
 
 const Time = styled('span')({
   color: colors.light30,
@@ -111,12 +113,14 @@ const Time = styled('span')({
   marginRight: 4,
   marginTop: -2,
 });
+Time.displayName = 'MakerTimeline:Time';
 
 const Code = styled(Text)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   marginTop: -1,
 });
+Code.displayName = 'MakerTimeline:Code';
 
 type TimePoint = {
   timestamp: number;

src/ui/components/ModalOverlay.tsx

@@ -23,6 +23,7 @@ const Overlay = styled('div')({
   top: 0,
   zIndex: 99999,
 });
+Overlay.displayName = 'ModalOverlay:Overlay';
 
 export default class ModalOverlay extends Component<{
   onClose: () => void;

src/ui/components/MultiLineInput.tsx

@@ -30,5 +30,6 @@ const MultiLineInput = styled('textarea')({
   ...multilineStyle,
   padding: '0 10px',
 });
+MultiLineInput.displayName = 'MultiLineInput';
 
 export default MultiLineInput;

src/ui/components/Orderable.tsx

@@ -41,12 +41,14 @@ type TabSizes = {
 const OrderableContainer = styled('div')({
   position: 'relative',
 });
+OrderableContainer.displayName = 'Orderable:OrderableContainer';
 
 const OrderableItemContainer = styled('div')(
   (props: {orientation: 'vertical' | 'horizontal'}) => ({
     display: props.orientation === 'vertical' ? 'block' : 'inline-block',
   }),
 );
+OrderableItemContainer.displayName = 'Orderable:OrderableItemContainer';
 
 class OrderableItem extends Component<{
   orientation: OrderableOrientation;

src/ui/components/Panel.tsx

@@ -21,6 +21,7 @@ const Chevron = styled(Glyph)({
   marginLeft: -2,
   marginBottom: 1,
 });
+Chevron.displayName = 'Panel:Chevron';
 
 /**
  * A Panel component.

src/ui/components/Popover.tsx

@@ -19,6 +19,7 @@ const Anchor = styled('img')({
   left: '50%',
   transform: 'translate(-50%, calc(100% + 2px))',
 });
+Anchor.displayName = 'Popover.Anchor';
 
 type Opts = {
   minWidth?: number;
@@ -56,6 +57,7 @@ const PopoverContainer = styled(FlexColumn)((props: {opts?: Opts}) => ({
     backgroundColor: colors.white,
   },
 }));
+PopoverContainer.displayName = 'Popover:PopoverContainer';
 
 type Props = {
   children: React.ReactNode;

src/ui/components/ResizeSensor.tsx

@@ -21,6 +21,7 @@ const IFrame = styled('iframe')({
   top: 0,
   left: 0,
 });
+IFrame.displayName = 'ResizeSensor:IFrame';
 
 /**
  * Listener for resize events.

src/ui/components/Select.tsx

@@ -16,15 +16,18 @@ const Label = styled('label')({
   display: 'flex',
   alignItems: 'center',
 });
+Label.displayName = 'Select:Label';
 
 const LabelText = styled(Text)({
   fontWeight: 500,
   marginRight: 5,
 });
+LabelText.displayName = 'Select:LabelText';
 
 const SelectMenu = styled('select')((props: {grow?: boolean}) => ({
   flexGrow: props.grow ? 1 : 0,
 }));
+SelectMenu.displayName = 'Select:SelectMenu';
 
 /**
  * Dropdown to select from a list of options

src/ui/components/Sidebar.tsx

@@ -23,6 +23,7 @@ import React from 'react';
 const SidebarInteractiveContainer = styled(Interactive)({
   flex: 'none',
 });
+SidebarInteractiveContainer.displayName = 'Sidebar:SidebarInteractiveContainer';
 
 type SidebarPosition = 'left' | 'top' | 'right' | 'bottom';
 
@@ -45,6 +46,7 @@ const SidebarContainer = styled(FlexColumn)(
     whiteSpace: props.overflow ? 'nowrap' : 'normal',
   }),
 );
+SidebarContainer.displayName = 'Sidebar:SidebarContainer';
 
 type SidebarProps = {
   /**

src/ui/components/SidebarLabel.tsx

@@ -11,8 +11,11 @@ import {colors} from './colors';
 import Label from './Label';
 import styled from 'react-emotion';
 
-export default styled(Label)({
+const SidebarLabel = styled(Label)({
   color: colors.blackAlpha30,
   fontSize: 12,
   padding: 10,
 });
+SidebarLabel.displayName = 'SidebarLabel';
+
+export default SidebarLabel;

src/ui/components/StackTrace.tsx

@@ -35,6 +35,7 @@ const Padder = styled('div')(
     backgroundColor,
   }),
 );
+Padder.displayName = 'StackTrace:Padder';
 
 const Container = styled('div')(
   ({isCrash, padded}: {isCrash?: boolean; padded?: boolean}) => ({
@@ -46,6 +47,7 @@ const Container = styled('div')(
     overflow: 'hidden',
   }),
 );
+Container.displayName = 'StackTrace:Container';
 
 const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
   color: isCrash ? colors.red : 'inherit',
@@ -53,12 +55,14 @@ const Title = styled(FlexRow)(({isCrash}: {isCrash?: boolean}) => ({
   alignItems: 'center',
   minHeight: 32,
 }));
+Title.displayName = 'StackTrace:Title';
 
 const Reason = styled(Text)(({isCrash}: {isCrash?: boolean}) => ({
   color: isCrash ? colors.red : colors.light80,
   fontWeight: 'bold',
   fontSize: 13,
 }));
+Reason.displayName = 'StackTrace:Reason';
 
 const Line = styled(Text)(
   ({isCrash, isBold}: {isCrash?: boolean; isBold?: boolean}) => ({
@@ -66,8 +70,10 @@ const Line = styled(Text)(
     fontWeight: isBold ? 'bold' : 'normal',
   }),
 );
+Line.displayName = 'StackTrace:Line';
 
 const Icon = styled(Glyph)({marginRight: 5});
+Icon.displayName = 'StackTrace:Icon';
 
 const COLUMNS = {
   lineNumber: 40,

src/ui/components/StarButton.tsx

@@ -18,6 +18,7 @@ const DownscaledGlyph = styled(Glyph)({
   height: 12,
   width: 12,
 });
+DownscaledGlyph.displayName = 'StarButton:DownscaledGlyph';
 
 export function StarButton({
   starred,

src/ui/components/StatusIndicator.tsx

@@ -29,5 +29,6 @@ const StatusIndicator = styled('div')(
     width: diameter,
   }),
 );
+StatusIndicator.displayName = 'StatusIndicator';
 
 export default StatusIndicator;

src/ui/components/Tabs.tsx

@@ -21,6 +21,7 @@ const TabList = styled(FlexRow)({
   justifyContent: 'center',
   alignItems: 'stretch',
 });
+TabList.displayName = 'Tabs:TabList';
 
 const TabListItem = styled('div')(
   (props: {
@@ -65,6 +66,7 @@ const TabListItem = styled('div')(
     },
   }),
 );
+TabListItem.displayName = 'Tabs:TabListItem';
 
 const TabListAddItem = styled(TabListItem)({
   borderRight: 'none',
@@ -72,6 +74,7 @@ const TabListAddItem = styled(TabListItem)({
   flexGrow: 0,
   fontWeight: 'bold',
 });
+TabListAddItem.displayName = 'Tabs:TabListAddItem';
 
 const CloseButton = styled('div')({
   color: '#000',
@@ -91,16 +94,19 @@ const CloseButton = styled('div')({
     color: '#fff',
   },
 });
+CloseButton.displayName = 'Tabs:CloseButton';
 
 const OrderableContainer = styled('div')({
   display: 'inline-block',
 });
+OrderableContainer.displayName = 'Tabs:OrderableContainer';
 
 const TabContent = styled('div')({
   height: '100%',
   overflow: 'auto',
   width: '100%',
 });
+TabContent.displayName = 'Tabs:TabContent';
 
 /**
  * A Tabs component.

src/ui/components/TabsContainer.tsx

@@ -19,10 +19,11 @@ const Container = styled('div')({
   marginTop: 11,
   marginBottom: 10,
 });
+Container.displayName = 'TabsContainer:Container';
 
 export const TabsContext = React.createContext(true);
 
-export default function(props: {children: any}) {
+export default function TabsContainer(props: {children: any}) {
   return (
     <Container>
       <TabsContext.Provider value={true}>{props.children}</TabsContext.Provider>

src/ui/components/Text.tsx

@@ -55,5 +55,6 @@ const Text = styled('span')(
         : props.whiteSpace,
   }),
 );
+Text.displayName = 'Text';
 
 export default Text;

src/ui/components/TextParagraph.tsx

@@ -19,5 +19,6 @@ const TextParagraph = styled('div')({
     marginBottom: 0,
   },
 });
+TextParagraph.displayName = 'TextParagraph';
 
 export default TextParagraph;

src/ui/components/Textarea.tsx

@@ -10,9 +10,12 @@
 import styled from 'react-emotion';
 import {inputStyle} from './Input';
 
-export default styled('textarea')(({compact}: {compact?: boolean}) => ({
+const Textarea = styled('textarea')(({compact}: {compact?: boolean}) => ({
   ...inputStyle(compact || false),
   lineHeight: 'normal',
   padding: compact ? '5px' : '8px',
   resize: 'none',
 }));
+Textarea.displayName = 'Textarea';
+
+export default Textarea;

src/ui/components/ToggleSwitch.tsx

@@ -34,16 +34,19 @@ export const StyledButton = styled('div')((props: {toggled: boolean}) => ({
     transition: 'all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s',
   },
 }));
+StyledButton.displayName = 'ToggleSwitch:StyledButton';
 
 const Container = styled(FlexRow)({
   alignItems: 'center',
   cursor: 'pointer',
 });
+Container.displayName = 'ToggleSwitch:Container';
 
 const Label = styled(Text)({
   marginLeft: 7,
   marginRight: 7,
 });
+Label.displayName = 'ToggleSwitch:Label';
 
 type Props = {
   /**

src/ui/components/Toolbar.tsx

@@ -34,9 +34,11 @@ const Toolbar = styled(FlexRow)(
     width: '100%',
   }),
 );
+Toolbar.displayName = 'Toolbar';
 
 export const Spacer = styled(FlexBox)({
   flexGrow: 1,
 });
+Spacer.displayName = 'Spacer';
 
 export default Toolbar;

src/ui/components/Tooltip.tsx

@@ -15,6 +15,7 @@ import PropTypes from 'prop-types';
 const TooltipContainer = styled('div')({
   display: 'contents',
 });
+TooltipContainer.displayName = 'Tooltip:TooltipContainer';
 
 type TooltipProps = {
   /** Content shown in the tooltip */

src/ui/components/TooltipProvider.tsx

@@ -83,6 +83,7 @@ const TooltipBubble = styled('div')(
     color: props.options.color,
   }),
 );
+TooltipBubble.displayName = 'TooltipProvider:TooltipBubble';
 
 // vertical offset on bubble when position is 'below'
 const BUBBLE_BELOW_POSITION_VERTICAL_OFFSET = -10;
@@ -120,6 +121,7 @@ const TooltipTail = styled('div')(
     right: props.right,
   }),
 );
+TooltipTail.displayName = 'TooltipProvider:TooltipTail';
 
 type TooltipProps = {
   children: React.ReactNode;

src/ui/components/VerticalRule.tsx

@@ -9,8 +9,11 @@
 
 import styled from 'react-emotion';
 
-export default styled('div')({
+const VerticalRule = styled('div')({
   backgroundColor: '#c9ced4',
   width: 3,
   margin: '0',
 });
+VerticalRule.displayName = 'VerticalRule';
+
+export default VerticalRule;

src/ui/components/View.tsx

@@ -20,5 +20,6 @@ const View = styled('div')((props: Props) => ({
   position: 'relative',
   width: props.grow ? '100%' : 'auto',
 }));
+View.displayName = 'View';
 
 export default View;

src/ui/components/VirtualList.tsx

@@ -24,6 +24,7 @@ const Inner = styled(FlexColumn)(
     width: '100%',
   }),
 );
+Inner.displayName = 'VirtualList:Inner';
 
 const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
   alignItems: 'flex-start',
@@ -32,6 +33,7 @@ const Content = styled(FlexColumn)(({top}: {top: TopProperty<number>}) => ({
   minWidth: '100%',
   overflow: 'visible',
 }));
+Content.displayName = 'VirtualList:Content';
 
 type VirtualListProps = {
   data: Array<any>;

src/ui/components/data-inspector/DataDescription.tsx

@@ -21,26 +21,32 @@ import React, {KeyboardEvent} from 'react';
 const NullValue = styled('span')({
   color: 'rgb(128, 128, 128)',
 });
+NullValue.displayName = 'DataDescription:NullValue';
 
 const UndefinedValue = styled('span')({
   color: 'rgb(128, 128, 128)',
 });
+UndefinedValue.displayName = 'DataDescription:UndefinedValue';
 
 const StringValue = styled('span')({
   color: colors.cherryDark1,
 });
+StringValue.displayName = 'DataDescription:StringValue';
 
 const ColorValue = styled('span')({
   color: colors.blueGrey,
 });
+ColorValue.displayName = 'DataDescription:ColorValue';
 
 const SymbolValue = styled('span')({
   color: 'rgb(196, 26, 22)',
 });
+SymbolValue.displayName = 'DataDescription:SymbolValue';
 
 const NumberValue = styled('span')({
   color: colors.tealDark1,
 });
+NumberValue.displayName = 'DataDescription:NumberValue';
 
 const ColorBox = styled('span')((props: {color: string}) => ({
   backgroundColor: props.color,
@@ -51,20 +57,24 @@ const ColorBox = styled('span')((props: {color: string}) => ({
   verticalAlign: 'middle',
   width: 12,
 }));
+ColorBox.displayName = 'DataDescription:ColorBox';
 
 const FunctionKeyword = styled('span')({
   color: 'rgb(170, 13, 145)',
   fontStyle: 'italic',
 });
+FunctionKeyword.displayName = 'DataDescription:FunctionKeyword';
 
 const FunctionName = styled('span')({
   fontStyle: 'italic',
 });
+FunctionName.displayName = 'DataDescription:FunctionName';
 
 const ColorPickerDescription = styled('div')({
   display: 'inline',
   position: 'relative',
 });
+ColorPickerDescription.displayName = 'DataDescription:ColorPickerDescription';
 
 type DataDescriptionProps = {
   path?: Array<string>;

src/ui/components/data-inspector/DataInspector.tsx

@@ -34,18 +34,22 @@ const BaseContainer = styled('div')(
     userSelect: 'text',
   }),
 );
+BaseContainer.displayName = 'DataInspector:BaseContainer';
 
 const RecursiveBaseWrapper = styled('span')({
   color: colors.red,
 });
+RecursiveBaseWrapper.displayName = 'DataInspector:RecursiveBaseWrapper';
 
 const Wrapper = styled('span')({
   color: '#555',
 });
+Wrapper.displayName = 'DataInspector:Wrapper';
 
 const PropertyContainer = styled('span')({
   paddingTop: '2px',
 });
+PropertyContainer.displayName = 'DataInspector:PropertyContainer';
 
 const ExpandControl = styled('span')({
   color: '#6e6e6e',
@@ -54,10 +58,12 @@ const ExpandControl = styled('span')({
   marginRight: 5,
   whiteSpace: 'pre',
 });
+ExpandControl.displayName = 'DataInspector:ExpandControl';
 
 export const InspectorName = styled('span')({
   color: colors.grapeDark1,
 });
+InspectorName.displayName = 'DataInspector:InspectorName';
 
 const nameTooltipOptions: TooltipOptions = {
   position: 'toLeft',

src/ui/components/data-inspector/DataPreview.tsx

@@ -17,6 +17,7 @@ import React from 'react';
 const PreviewContainer = styled('span')({
   fontStyle: 'italic',
 });
+PreviewContainer.displayName = 'DataPreview:PreviewContainer';
 
 function intersperse(arr: Array<any>, sep: string) {
   if (arr.length === 0) {

src/ui/components/desktop-toolbar.tsx

@@ -27,6 +27,8 @@ const DesktopDropdownContainer = styled('div')({
     borderBottom: 'none',
   },
 });
+DesktopDropdownContainer.displayName =
+  'DesktopDropdown:DesktopDropdownContainer';
 
 export function DesktopDropdown(props: {
   deactivate?: () => void;
@@ -57,6 +59,8 @@ const DesktopDropdownItemContainer = styled('div')(
     },
   }),
 );
+DesktopDropdownItemContainer.displayName =
+  'DesktopDropdownItem:DesktopDropdownItemContainer';
 
 type DesktopDropdownItemState = {hovered: boolean};
 
@@ -126,3 +130,4 @@ export const DesktopDropdownSelectedItem = styled(DesktopDropdownItem)({
     position: 'absolute',
   },
 });
+DesktopDropdownSelectedItem.displayName = 'DesktopDropdownSelectedItem';

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

@@ -72,6 +72,7 @@ const ElementsRowContainer = styled(ContextMenu)((props: any) => ({
     backgroundColor: backgroundColorHover(props),
   },
 }));
+ElementsRowContainer.displayName = 'Elements:ElementsRowContainer';
 
 const ElementsRowDecoration = styled(FlexRow)({
   flexShrink: 0,
@@ -82,6 +83,7 @@ const ElementsRowDecoration = styled(FlexRow)({
   width: 16,
   top: -1,
 });
+ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
 
 const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
   backgroundColor: colors.light20,
@@ -93,12 +95,14 @@ const ElementsLine = styled('div')((props: {childrenCount: number}) => ({
   width: 2,
   borderRadius: '999em',
 }));
+ElementsLine.displayName = 'Elements:ElementsLine';
 
 const DecorationImage = styled('img')({
   height: 12,
   marginRight: 5,
   width: 12,
 });
+DecorationImage.displayName = 'Elements:DecorationImage';
 
 const NoShrinkText = styled(Text)({
   flexShrink: 0,
@@ -107,20 +111,25 @@ const NoShrinkText = styled(Text)({
   userSelect: 'none',
   fontWeight: 400,
 });
+NoShrinkText.displayName = 'Elements:NoShrinkText';
 
 const ElementsRowAttributeContainer = styled(NoShrinkText)({
   color: colors.dark80,
   fontWeight: 300,
   marginLeft: 5,
 });
+ElementsRowAttributeContainer.displayName =
+  'Elements:ElementsRowAttributeContainer';
 
 const ElementsRowAttributeKey = styled('span')({
   color: colors.tomato,
 });
+ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';
 
 const ElementsRowAttributeValue = styled('span')({
   color: colors.slateDark3,
 });
+ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';
 
 class PartialHighlight extends PureComponent<{
   selected: boolean;
@@ -403,12 +412,14 @@ const ElementsContainer = styled(FlexColumn)({
   minWidth: '100%',
   overflow: 'auto',
 });
+ElementsContainer.displayName = 'Elements:ElementsContainer';
 
 const ElementsBox = styled(FlexColumn)({
   alignItems: 'flex-start',
   flex: 1,
   overflow: 'auto',
 });
+ElementsBox.displayName = 'Elements:ElementsBox';
 
 export type DecorateRow = (e: Element) => ReactElement<any> | undefined | null;
 

src/ui/components/filter/FilterRow.tsx

@@ -40,6 +40,7 @@ const FilterText = styled('div')({
     color: `${colors.white} !important`,
   },
 });
+FilterText.displayName = 'FilterRow:FilterText';
 
 type Props = {
   children: React.ReactNode;

src/ui/components/searchable/FilterToken.tsx

@@ -39,6 +39,7 @@ const Token = styled(Text)(
     },
   }),
 );
+Token.displayName = 'FilterToken:Token';
 
 const Key = styled(Text)(
   (props: {type: 'exclude' | 'include' | 'enum'; focused?: boolean}) => ({
@@ -60,6 +61,7 @@ const Key = styled(Text)(
     },
   }),
 );
+Key.displayName = 'FilterToken:Key';
 
 const Value = styled(Text)({
   whiteSpace: 'nowrap',
@@ -69,6 +71,7 @@ const Value = styled(Text)({
   lineHeight: '21px',
   paddingLeft: 3,
 });
+Value.displayName = 'FilterToken:Value';
 
 const Chevron = styled('div')((props: {focused?: boolean}) => ({
   border: 0,
@@ -88,6 +91,7 @@ const Chevron = styled('div')((props: {focused?: boolean}) => ({
     backgroundColor: 'transparent',
   },
 }));
+Chevron.displayName = 'FilterToken:Chevron';
 
 type Props = {
   filter: Filter;

src/ui/components/searchable/Searchable.tsx

@@ -27,6 +27,7 @@ const SearchBar = styled(Toolbar)({
   height: 42,
   padding: 6,
 });
+SearchBar.displayName = 'Searchable:SearchBar';
 
 export const SearchBox = styled(FlexBox)({
   backgroundColor: colors.white,
@@ -37,6 +38,7 @@ export const SearchBox = styled(FlexBox)({
   alignItems: 'center',
   paddingLeft: 4,
 });
+SearchBox.displayName = 'Searchable:SearchBox';
 
 export const SearchInput = styled(Input)(
   (props: {focus?: boolean; regex?: boolean; isValidInput?: boolean}) => ({
@@ -56,6 +58,7 @@ export const SearchInput = styled(Input)(
     },
   }),
 );
+SearchInput.displayName = 'Searchable:SearchInput';
 
 const Clear = styled(Text)({
   position: 'absolute',
@@ -75,6 +78,7 @@ const Clear = styled(Text)({
     backgroundColor: 'rgba(0,0,0,0.15)',
   },
 });
+Clear.displayName = 'Searchable:Clear';
 
 export const SearchIcon = styled(Glyph)({
   marginRight: 3,
@@ -82,11 +86,13 @@ export const SearchIcon = styled(Glyph)({
   marginTop: -1,
   minWidth: 16,
 });
+SearchIcon.displayName = 'Searchable:SearchIcon';
 
 const Actions = styled(FlexRow)({
   marginLeft: 8,
   flexShrink: 0,
 });
+Actions.displayName = 'Searchable:Actions';
 
 export type SearchableProps = {
   addFilter: (filter: Filter) => void;
@@ -131,6 +137,8 @@ const Searchable = (
   Component: React.ComponentType<any>,
 ): React.ComponentType<any> =>
   class extends PureComponent<Props, State> {
+    static displayName = `Searchable(${Component.displayName})`;
+
     static defaultProps = {
       placeholder: 'Search...',
     };

src/ui/components/table/ManagedTable.tsx

@@ -148,6 +148,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
   overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
 }));
+Container.displayName = 'ManagedTable:Container';
 
 const globalTableState: {[key: string]: TableColumnSizes} = {};
 

src/ui/components/table/ManagedTable_immutable.tsx

@@ -145,6 +145,7 @@ const Container = styled(FlexColumn)((props: {canOverflow?: boolean}) => ({
   overflow: props.canOverflow ? 'scroll' : 'visible',
   flexGrow: 1,
 }));
+Container.displayName = 'ManagedTable_immutable:Container';
 
 const globalTableState: {[key: string]: TableColumnSizes} = {};
 

src/ui/components/table/TableHead.tsx

@@ -29,6 +29,7 @@ import React from 'react';
 const TableHeaderArrow = styled('span')({
   float: 'right',
 });
+TableHeaderArrow.displayName = 'TableHead:TableHeaderArrow';
 
 const TableHeaderColumnInteractive = styled(Interactive)({
   display: 'inline-block',
@@ -37,10 +38,13 @@ const TableHeaderColumnInteractive = styled(Interactive)({
   whiteSpace: 'nowrap',
   width: '100%',
 });
+TableHeaderColumnInteractive.displayName =
+  'TableHead:TableHeaderColumnInteractive';
 
 const TableHeaderColumnContainer = styled('div')({
   padding: '0 8px',
 });
+TableHeaderColumnContainer.displayName = 'TableHead:TableHeaderColumnContainer';
 
 const TableHeadContainer = styled(FlexRow)(
   (props: {horizontallyScrollable?: boolean}) => ({
@@ -56,6 +60,7 @@ const TableHeadContainer = styled(FlexRow)(
     minWidth: props.horizontallyScrollable ? 'min-content' : 0,
   }),
 );
+TableHeadContainer.displayName = 'TableHead:TableHeadContainer';
 
 const TableHeadColumnContainer = styled('div')(
   (props: {width: string | number}) => ({
@@ -81,6 +86,7 @@ const TableHeadColumnContainer = styled('div')(
     },
   }),
 );
+TableHeadColumnContainer.displayName = 'TableHead:TableHeadColumnContainer';
 
 const RIGHT_RESIZABLE = {right: true};
 

src/ui/components/table/TableRow.tsx

@@ -84,6 +84,7 @@ const TableBodyRowContainer = styled(FlexRow)(
     },
   }),
 );
+TableBodyRowContainer.displayName = 'TableRow:TableBodyRowContainer';
 
 const TableBodyColumnContainer = styled('div')(
   (props: {
@@ -105,6 +106,7 @@ const TableBodyColumnContainer = styled('div')(
     justifyContent: props.justifyContent,
   }),
 );
+TableBodyColumnContainer.displayName = 'TableRow:TableBodyColumnContainer';
 
 type Props = {
   columnSizes: TableColumnSizes;

src/ui/components/table/TypeBasedValueRenderer.tsx

@@ -35,6 +35,7 @@ const NonWrappingText = styled(Text)({
   whiteSpace: 'nowrap',
   userSelect: 'none',
 });
+NonWrappingText.displayName = 'TypeBasedValueRenderer:NonWrappingText';
 
 const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
   '&::before': {
@@ -48,6 +49,7 @@ const BooleanValue = styled(NonWrappingText)((props: {active?: boolean}) => ({
     marginTop: 1,
   },
 }));
+BooleanValue.displayName = 'TypeBasedValueRenderer:BooleanValue';
 
 export function renderValue(val: Value) {
   switch (val.type) {