Initial move to flipper-plugin

Summary:
This diff moves the core of ElementsInspector to flipper-plugin and decouples it from legacy design system and Electron, without any significant improvements or API changes yet, which will follow later.

Colors and docs will be added later in this stack.

Reviewed By: passy

Differential Revision: D27660300

fbshipit-source-id: 96abfa3b3174fa852cf04ae119c23c3d629fee74

desktop/app/src/fb-stubs/IDEFileResolver.tsx

@@ -7,10 +7,8 @@
  * @format
  */
 
-import {
+import {ElementFramework} from '../ui/components/elements-inspector/ElementFramework';
-  ElementFramework,
+import {ElementsInspectorElement} from 'flipper-plugin';
-  Element,
-} from '../ui/components/elements-inspector/ElementsInspector';
 
 export enum IDEType {
   'DIFFUSION',
@@ -60,13 +58,15 @@ export abstract class IDEFileResolver {
   }
 
   static isElementFromFramework(
-    _node: Element,
+    _node: ElementsInspectorElement,
     _framework: ElementFramework,
   ): boolean {
     throw new Error('Method not implemented.');
   }
 
-  static isElementFromSupportedFramework(_node: Element): boolean {
+  static isElementFromSupportedFramework(
+    _node: ElementsInspectorElement,
+  ): boolean {
     throw new Error('Method not implemented.');
   }
 }

desktop/app/src/index.tsx

@@ -173,20 +173,17 @@ export {
 } from './ui/components/searchable/SearchableTable';
 export {default as SearchableTable_immutable} from './ui/components/searchable/SearchableTable_immutable';
 export {
-  ElementID,
+  ElementsInspector,
-  ElementData,
+  ElementsInspectorElement as Element,
-  ElementFramework,
+  // TODO: clean up or create namespace
-  ElementAttribute,
-  Element,
-  ElementSearchResultSet,
   ElementsInspectorProps,
-} from './ui/components/elements-inspector/ElementsInspector';
+  ElementExtraInfo,
-export {
+  ElementAttribute,
-  Elements,
+  ElementData,
-  ElementsConstants,
+  ElementSearchResultSet,
-} from './ui/components/elements-inspector/elements';
+  ElementID,
-export {ContextMenuExtension} from './ui/components/elements-inspector/elements';
+} from 'flipper-plugin';
-export {default as ElementsInspector} from './ui/components/elements-inspector/ElementsInspector';
+export {ElementFramework} from './ui/components/elements-inspector/ElementFramework';
 export {InspectorSidebar} from './ui/components/elements-inspector/sidebar';
 export {default as Sheet} from './ui/components/Sheet';
 export {default as FileSelector} from './ui/components/FileSelector';

desktop/app/src/ui/components/elements-inspector/ElementFramework.tsx

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+export enum ElementFramework {
+  'LITHO',
+  'CK',
+}

desktop/app/src/ui/components/elements-inspector/Visualizer.tsx

@@ -9,18 +9,18 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {Element} from './ElementsInspector';
+import {ElementsInspectorElement} from 'flipper-plugin';
 import styled from '@emotion/styled';
 
 export function VisualizerPortal(props: {
   container: HTMLElement;
   highlightedElement: string | null;
-  elements: {[key: string]: Element};
+  elements: {[key: string]: ElementsInspectorElement};
   screenshotURL: string;
   screenDimensions: {width: number; height: number};
 }) {
   props.container.style.margin = '0';
-  const element: Element | null | '' =
+  const element: ElementsInspectorElement | null | '' =
     props.highlightedElement && props.elements[props.highlightedElement];
 
   const position =

desktop/app/src/ui/components/elements-inspector/sidebar.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {Element} from './ElementsInspector';
+import {ElementsInspectorElement} from 'flipper-plugin';
 import {PluginClient} from '../../../plugin';
 import Client from '../../../Client';
 import {Logger} from '../../../fb-interfaces/Logger';
@@ -76,7 +76,7 @@ class InspectorSidebarSection extends Component<InspectorSidebarSectionProps> {
 }
 
 type Props = {
-  element: Element | undefined | null;
+  element: ElementsInspectorElement | undefined | null;
   tooltips?: Object;
   onValueChanged: OnValueChanged | undefined | null;
   client: PluginClient;

desktop/app/src/ui/index.tsx

@@ -141,17 +141,6 @@ export {
 export {default as SearchableTable_immutable} from './components/searchable/SearchableTable_immutable';
 export {SearchableProps} from './components/searchable/Searchable';
 
-export {
-  ElementID,
-  ElementData,
-  ElementAttribute,
-  Element,
-  ElementSearchResultSet,
-  ElementsInspectorProps,
-} from './components/elements-inspector/ElementsInspector';
-export {Elements} from './components/elements-inspector/elements';
-export {ContextMenuExtension} from './components/elements-inspector/elements';
-export {default as ElementsInspector} from './components/elements-inspector/ElementsInspector';
 export {InspectorSidebar} from './components/elements-inspector/sidebar';
 export {VisualizerPortal} from './components/elements-inspector/Visualizer';
 

desktop/flipper-plugin/src/__tests__/api.node.tsx

@@ -34,6 +34,7 @@ test('Correct top level API exposed', () => {
       "DataSource",
       "DataTable",
       "DetailSidebar",
+      "ElementsInspector",
       "Layout",
       "MarkerTimeline",
       "NUX",
@@ -72,6 +73,13 @@ test('Correct top level API exposed', () => {
       "DevicePluginClient",
       "DeviceType",
       "Draft",
+      "ElementAttribute",
+      "ElementData",
+      "ElementExtraInfo",
+      "ElementID",
+      "ElementSearchResultSet",
+      "ElementsInspectorElement",
+      "ElementsInspectorProps",
       "FlipperLib",
       "HighlightManager",
       "Idler",

desktop/flipper-plugin/src/index.ts

@@ -102,6 +102,17 @@ export {
 export {MarkerTimeline} from './ui/MarkerTimeline';
 export {ManagedDataInspector as DataInspector} from './ui/data-inspector/ManagedDataInspector';
 
+export {
+  ElementsInspector,
+  Element as ElementsInspectorElement,
+  // TODO: clean up or create namespace
+  ElementsInspectorProps,
+  ElementExtraInfo,
+  ElementAttribute,
+  ElementData,
+  ElementSearchResultSet,
+  ElementID,
+} from './ui/elements-inspector/ElementsInspector';
 export {useMemoize} from './utils/useMemoize';
 
 // It's not ideal that this exists in flipper-plugin sources directly,

desktop/flipper-plugin/src/ui/Layout.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import React, {CSSProperties} from 'react';
+import React, {CSSProperties, forwardRef} from 'react';
 import styled from '@emotion/styled';
 import {
   normalizePadding,
@@ -110,28 +110,33 @@ const ScrollChild = styled(Container)<{axis?: ScrollAxis}>(({axis}) => ({
 
 type ScrollAxis = 'x' | 'y' | 'both';
 
-const ScrollContainer = ({
+const ScrollContainer = forwardRef(
-  children,
+  (
-  horizontal,
+    {
-  vertical,
+      children,
-  padv,
+      horizontal,
-  padh,
+      vertical,
-  pad,
+      padv,
-  ...rest
+      padh,
-}: React.HTMLAttributes<HTMLDivElement> & {
+      pad,
-  horizontal?: boolean;
+      ...rest
-  vertical?: boolean;
+    }: React.HTMLAttributes<HTMLDivElement> & {
-} & PaddingProps) => {
+      horizontal?: boolean;
-  const axis =
+      vertical?: boolean;
-    horizontal && !vertical ? 'x' : !horizontal && vertical ? 'y' : 'both';
+    } & PaddingProps,
-  return (
+    ref: React.ForwardedRef<HTMLDivElement>,
-    <ScrollParent axis={axis} {...rest}>
+  ) => {
-      <ScrollChild axis={axis} padv={padv} padh={padh} pad={pad}>
+    const axis =
-        {children}
+      horizontal && !vertical ? 'x' : !horizontal && vertical ? 'y' : 'both';
-      </ScrollChild>
+    return (
-    </ScrollParent>
+      <ScrollParent axis={axis} {...rest} ref={ref}>
-  ) as any;
+        <ScrollChild axis={axis} padv={padv} padh={padh} pad={pad}>
-};
+          {children}
+        </ScrollChild>
+      </ScrollParent>
+    ) as any;
+  },
+);
 
 type SplitLayoutProps = {
   /**

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

@@ -8,8 +8,7 @@
  */
 
 import {Component} from 'react';
-import {Elements, DecorateRow} from './elements';
+import {Elements, DecorateRow, ContextMenuExtension} from './elements';
-import {ContextMenuExtension} from '../../../ui';
 import React from 'react';
 
 export type ElementID = string;
@@ -32,11 +31,6 @@ export type ElementData = {
   };
 };
 
-export enum ElementFramework {
-  'LITHO',
-  'CK',
-}
-
 export type ElementAttribute = {
   name: string;
   value: string;
@@ -80,7 +74,7 @@ export type ElementsInspectorProps = {
   decorateRow?: DecorateRow;
 };
 
-export default class ElementsInspector extends Component<ElementsInspectorProps> {
+export class ElementsInspector extends Component<ElementsInspectorProps> {
   static defaultProps = {
     alternateRowColor: true,
   };

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

@@ -7,17 +7,17 @@
  * @format
  */
 
+import {Dropdown, Menu, Typography} from 'antd';
 import {ElementID, Element, ElementSearchResultSet} from './ElementsInspector';
-import ContextMenu from '../ContextMenu';
 import {PureComponent, ReactElement} from 'react';
-import FlexRow from '../FlexRow';
-import Glyph from '../Glyph';
-import {colors} from '../colors';
-import Text from '../Text';
 import styled from '@emotion/styled';
-import {clipboard, MenuItemConstructorOptions} from 'electron';
 import React, {MouseEvent, KeyboardEvent} from 'react';
-import {Scrollable} from '../..';
+import {theme} from '../theme';
+import {Layout} from '../Layout';
+import {tryGetFlipperLibImplementation} from 'flipper-plugin/src/plugin/FlipperLib';
+import {DownOutlined, RightOutlined} from '@ant-design/icons';
+
+const {Text} = Typography;
 
 export const ElementsConstants = {
   rowHeight: 23,
@@ -30,13 +30,13 @@ const backgroundColor = (props: {
   even: boolean;
 }) => {
   if (props.selected) {
-    return colors.macOSTitleBarIconSelected;
+    return '#4d84f5';
   } else if (props.isQueryMatch) {
-    return colors.purpleLight;
+    return '#4d84f5';
   } else if (props.focused) {
     return '#00CF52';
   } else if (props.even) {
-    return colors.light02;
+    return '#f6f7f9';
   } else {
     return '';
   }
@@ -44,7 +44,7 @@ const backgroundColor = (props: {
 
 const backgroundColorHover = (props: {selected: boolean; focused: boolean}) => {
   if (props.selected) {
-    return colors.macOSTitleBarIconSelected;
+    return '#4d84f5';
   } else if (props.focused) {
     return '#00CF52';
   } else {
@@ -52,11 +52,11 @@ const backgroundColorHover = (props: {selected: boolean; focused: boolean}) => {
   }
 };
 
-const ElementsRowContainer = styled(ContextMenu)<any>((props) => ({
+const ElementsRowContainer = styled(Layout.Horizontal)<any>((props) => ({
   flexDirection: 'row',
   alignItems: 'center',
   backgroundColor: backgroundColor(props),
-  color: props.selected || props.focused ? colors.white : colors.grapeDark3,
+  color: props.selected || props.focused ? theme.backgroundDefault : '#58409b',
   flexShrink: 0,
   flexWrap: 'nowrap',
   height: ElementsConstants.rowHeight,
@@ -65,7 +65,10 @@ const ElementsRowContainer = styled(ContextMenu)<any>((props) => ({
   position: 'relative',
 
   '& *': {
-    color: props.selected || props.focused ? `${colors.white} !important` : '',
+    color:
+      props.selected || props.focused
+        ? `${theme.backgroundDefault} !important`
+        : '',
   },
 
   '&:hover': {
@@ -74,7 +77,7 @@ const ElementsRowContainer = styled(ContextMenu)<any>((props) => ({
 }));
 ElementsRowContainer.displayName = 'Elements:ElementsRowContainer';
 
-const ElementsRowDecoration = styled(FlexRow)({
+const ElementsRowDecoration = styled(Layout.Horizontal)({
   flexShrink: 0,
   justifyContent: 'flex-end',
   alignItems: 'center',
@@ -86,7 +89,7 @@ const ElementsRowDecoration = styled(FlexRow)({
 ElementsRowDecoration.displayName = 'Elements:ElementsRowDecoration';
 
 const ElementsLine = styled.div<{childrenCount: number}>((props) => ({
-  backgroundColor: colors.light20,
+  backgroundColor: '#bec2c9',
   height: props.childrenCount * ElementsConstants.rowHeight - 4,
   position: 'absolute',
   right: 3,
@@ -109,11 +112,13 @@ const NoShrinkText = styled(Text)({
   flexWrap: 'nowrap',
   overflow: 'hidden',
   fontWeight: 400,
+  font: theme.monospace.fontFamily,
+  fontSize: theme.monospace.fontSize,
 });
 NoShrinkText.displayName = 'Elements:NoShrinkText';
 
 const ElementsRowAttributeContainer = styled(NoShrinkText)({
-  color: colors.dark80,
+  color: '#333333',
   fontWeight: 300,
   marginLeft: 5,
 });
@@ -121,12 +126,12 @@ ElementsRowAttributeContainer.displayName =
   'Elements:ElementsRowAttributeContainer';
 
 const ElementsRowAttributeKey = styled.span({
-  color: colors.tomato,
+  color: '#fb724b',
 });
 ElementsRowAttributeKey.displayName = 'Elements:ElementsRowAttributeKey';
 
 const ElementsRowAttributeValue = styled.span({
-  color: colors.slateDark3,
+  color: '#688694',
 });
 ElementsRowAttributeValue.displayName = 'Elements:ElementsRowAttributeValue';
 
@@ -137,8 +142,8 @@ class PartialHighlight extends PureComponent<{
   content: string;
 }> {
   static HighlightedText = styled.span<{selected: boolean}>((props) => ({
-    backgroundColor: colors.lemon,
+    backgroundColor: '#fcd872',
-    color: props.selected ? `${colors.grapeDark3} !important` : 'auto',
+    color: props.selected ? `${'#58409b'} !important` : 'auto',
   }));
 
   render() {
@@ -180,7 +185,7 @@ class ElementsRowAttribute extends PureComponent<{
   render() {
     const {name, value, matchingSearchQuery, selected} = this.props;
     return (
-      <ElementsRowAttributeContainer code={true}>
+      <ElementsRowAttributeContainer>
         <ElementsRowAttributeKey>{name}</ElementsRowAttributeKey>=
         <ElementsRowAttributeValue>
           <PartialHighlight
@@ -237,22 +242,23 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
     this.state = {hovered: false};
   }
 
-  getContextMenu = (): Array<MenuItemConstructorOptions> => {
+  getContextMenu = () => {
     const {props} = this;
-    let items: Array<MenuItemConstructorOptions> = [
+    let items = [
-      {
-        type: 'separator',
-      },
       {
         label: 'Copy',
         click: () => {
-          clipboard.writeText(props.onCopyExpandedTree(props.element, 0));
+          tryGetFlipperLibImplementation()?.writeTextToClipboard(
+            props.onCopyExpandedTree(props.element, 0),
+          );
         },
       },
       {
         label: 'Copy expanded child elements',
         click: () =>
-          clipboard.writeText(props.onCopyExpandedTree(props.element, 255)),
+          tryGetFlipperLibImplementation()?.writeTextToClipboard(
+            props.onCopyExpandedTree(props.element, 255),
+          ),
       },
       {
         label: props.element.expanded ? 'Collapse' : 'Expand',
@@ -274,7 +280,7 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
         return {
           label: `Copy ${o.name}`,
           click: () => {
-            clipboard.writeText(o.value);
+            tryGetFlipperLibImplementation()?.writeTextToClipboard(o.value);
           },
         };
       }),
@@ -287,7 +293,15 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
       });
     }
 
-    return items;
+    return (
+      <Menu>
+        {items.map(({label, click}) => (
+          <Menu.Item key={label} onClick={click}>
+            {label}
+          </Menu.Item>
+        ))}
+      </Menu>
+    );
   };
 
   onClick = () => {
@@ -330,12 +344,15 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
     let arrow;
     if (hasChildren) {
       arrow = (
-        <span onClick={this.onDoubleClick} role="button" tabIndex={-1}>
+        <span
-          <Glyph
+          onClick={this.onDoubleClick}
-            size={8}
+          role="button"
-            name={element.expanded ? 'chevron-down' : 'chevron-right'}
+          tabIndex={-1}
-            color={selected || focused ? 'white' : colors.light80}
+          style={{
-          />
+            color: selected || focused ? 'white' : '#1d2129',
+            fontSize: '8px',
+          }}>
+          {element.expanded ? <DownOutlined /> : <RightOutlined />}
         </span>
       );
     }
@@ -377,35 +394,38 @@ class ElementsRow extends PureComponent<ElementsRowProps, ElementsRowState> {
     }
 
     return (
-      <ElementsRowContainer
+      <Dropdown
-        ref={forwardedRef}
-        buildItems={this.getContextMenu}
         key={id}
-        level={level}
+        overlay={this.getContextMenu}
-        selected={selected}
+        trigger={['contextMenu']}>
-        focused={focused}
+        <ElementsRowContainer
-        matchingSearchQuery={matchingSearchQuery}
+          level={level}
-        even={even}
+          ref={forwardedRef}
-        onClick={this.onClick}
+          selected={selected}
-        onDoubleClick={this.onDoubleClick}
+          focused={focused}
-        onMouseEnter={this.onMouseEnter}
+          matchingSearchQuery={matchingSearchQuery}
-        onMouseLeave={this.onMouseLeave}
+          even={even}
-        isQueryMatch={this.props.isQueryMatch}
+          onClick={this.onClick}
-        style={style}>
+          onDoubleClick={this.onDoubleClick}
-        <ElementsRowDecoration>
+          onMouseEnter={this.onMouseEnter}
-          {line}
+          onMouseLeave={this.onMouseLeave}
-          {arrow}
+          isQueryMatch={this.props.isQueryMatch}
-        </ElementsRowDecoration>
+          style={style}>
-        <NoShrinkText code={true}>
+          <ElementsRowDecoration>
-          {decoration}
+            {line}
-          <PartialHighlight
+            {arrow}
-            content={element.name}
+          </ElementsRowDecoration>
-            highlighted={matchingSearchQuery}
+          <NoShrinkText>
-            selected={selected}
+            {decoration}
-          />
+            <PartialHighlight
-        </NoShrinkText>
+              content={element.name}
-        {attributes}
+              highlighted={matchingSearchQuery}
-      </ElementsRowContainer>
+              selected={selected}
+            />
+          </NoShrinkText>
+          {attributes}
+        </ElementsRowContainer>
+      </Dropdown>
     );
   }
 }
@@ -419,7 +439,7 @@ function containsKeyInSearchResults(
 
 const ElementsContainer = styled('div')({
   display: 'table',
-  backgroundColor: colors.white,
+  backgroundColor: theme.backgroundDefault,
   minHeight: '100%',
   minWidth: '100%',
 });
@@ -568,7 +588,9 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
     ) {
       e.stopPropagation();
       e.preventDefault();
-      clipboard.writeText(selectedElement.name);
+      tryGetFlipperLibImplementation()?.writeTextToClipboard(
+        selectedElement.name,
+      );
       return;
     }
 
@@ -735,11 +757,11 @@ export class Elements extends PureComponent<ElementsProps, ElementsState> {
 
   render() {
     return (
-      <Scrollable ref={this._outerRef}>
+      <Layout.ScrollContainer ref={this._outerRef}>
         <ElementsContainer onKeyDown={this.onKeyDown} tabIndex={0}>
           {this.state.flatElements.map(this.buildRow)}
         </ElementsContainer>
-      </Scrollable>
+      </Layout.ScrollContainer>
     );
   }
 }

desktop/plugins/public/layout/MultipleSelectionSection.tsx

@@ -11,7 +11,6 @@ import {
   FlexColumn,
   FlexBox,
   Element,
-  ElementsConstants,
   ElementID,
   ElementsInspector,
   Glyph,
@@ -21,7 +20,7 @@ import {
 import React, {memo, useState} from 'react';
 
 const MultipleSelectorSectionContainer = styled(FlexColumn)({
-  maxHeight: 3 * ElementsConstants.rowHeight + 24,
+  maxHeight: 100,
 });
 
 const MultipleSelectorSectionTitle = styled(FlexBox)({

docs/extending/flipper-plugin.mdx

@@ -784,6 +784,14 @@ See `View > Flipper Style Guide` inside the Flipper application for more details
 ### DataInspector
 ### DataDescription
 ### MarkerTimeline
+### ElementsInspector
+### ElementAttribute
+### ElementData
+### ElementExtraInfo
+### ElementID
+### ElementSearchResultSet
+### ElementsInspectorElement
+### ElementsInspectorProps
 
 Coming soon.