Styles refactoring

Summary: This change extracts most styles used across the inspector components and puts them in Styles.tsx

Reviewed By: passy

Differential Revision: D41026862

fbshipit-source-id: 461a78fb4a707d9a455281ec020bac95191ddfce

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -20,45 +20,24 @@ import {Checkbox, Col, Row} from 'antd';
 import {displayableName} from '../utilities/displayableName';
 import ColorInspector from './ColorInspector';
 import SizeInspector from './SizeInspector';
-import {theme} from 'flipper-plugin';
 import SpaceBoxInspector from './SpaceBoxInspector';
 import BoundsInspector from './BoundsInspector';
 import Coordinate3DInspector from './Coordinate3DInspector';
 import CoordinateInspector from './CoordinateInspector';
+import {
+  AutoMarginStyle,
+  EnumAttributeValueStyle,
+  NumberAttributeValueStyle,
+  ObjectContainerStyle,
+  RowStyle,
+  TextAttributeValueStyle,
+} from './Styles';
 
-const NumberValue = styled.span({
+const NumberValue = styled.span(NumberAttributeValueStyle);
-  color: theme.semanticColors.numberValue,
+const TextValue = styled.span(TextAttributeValueStyle);
-  display: 'flex',
+const EnumValue = styled.span(EnumAttributeValueStyle);
-});
+const ObjectContainer = styled.div(ObjectContainerStyle);
-
+const CenteredContentContainer = styled.div(AutoMarginStyle);
-const TextValue = styled.span({
-  color: theme.semanticColors.stringValue,
-  display: 'flex',
-});
-
-const EnumValue = styled.span({
-  color: theme.semanticColors.stringValue,
-  fontSize: theme.fontSize.small,
-  margin: 'auto',
-});
-
-const ContainerStyle = {
-  marginTop: 4,
-  marginBottom: 4,
-  borderStyle: 'solid',
-  borderColor: theme.dividerColor,
-  borderWidth: '0 0 1px 0',
-};
-
-const ObjectContainer = styled.div({
-  borderLeftWidth: 5,
-  borderLeftColor: 'lightgray',
-  borderLeftStyle: 'solid',
-});
-
-const CenterContainer = styled.div({
-  margin: 'auto',
-});
 type NamedAttributeInspectorProps = {
   name: string;
 };
@@ -67,12 +46,12 @@ const NamedAttributeInspector: React.FC<NamedAttributeInspectorProps> = ({
   children,
 }) => {
   return (
-    <Row style={ContainerStyle}>
+    <Row style={RowStyle}>
-      <Col span={8} style={{margin: 'auto'}}>
+      <Col span={8} style={AutoMarginStyle}>
         {name}
       </Col>
       <Col span={16}>
-        <CenterContainer>{children}</CenterContainer>
+        <CenteredContentContainer>{children}</CenteredContentContainer>
       </Col>
     </Row>
   );
@@ -85,7 +64,7 @@ const ObjectAttributeInspector: React.FC<{
   level: number;
 }> = ({metadata, name, fields, level}) => {
   return (
-    <div style={ContainerStyle}>
+    <div style={RowStyle}>
       {name}
       {Object.keys(fields).map(function (key, _) {
         const metadataId: number = Number(key);

desktop/plugins/public/ui-debugger/components/sidebar/inspector/BoundsInspector.tsx

@@ -9,6 +9,7 @@
 
 import React from 'react';
 import {Bounds} from '../../../types';
+import {InspectorStyle} from './Styles';
 
 type Props = {
   size?: number;
@@ -22,13 +23,13 @@ type Props = {
 };
 
 const BoundsInspector: React.FC<Props> = ({
-  size = 180,
+  size = InspectorStyle.bounds.size,
-  strokeColor = '#4A5967',
+  strokeColor = InspectorStyle.strokeColor,
-  outerBoxColor = '#F2F3F7',
+  outerBoxColor = InspectorStyle.outerFillColor,
-  innerBoxColor = '#CCD1D9',
+  innerBoxColor = InspectorStyle.innerFillColor,
-  multiplier = 0.4,
+  multiplier = InspectorStyle.bounds.multiplier,
-  margin = 4,
+  margin = InspectorStyle.bounds.margin,
-  separator = 10,
+  separator = InspectorStyle.bounds.separator,
   value,
 }) => {
   const scale =

desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx

@@ -12,25 +12,14 @@ import {Popover} from 'antd';
 import {Color} from '../../../types';
 import {SketchPicker, RGBColor, ColorResult} from 'react-color';
 import {styled} from 'flipper-plugin';
+import {ColorInnerButtonStyle, ColorOuterButtonStyle} from './Styles';
 
 type State = {
   color: RGBColor;
 };
 
-const OuterColorButton = styled.div({
+const OuterColorButton = styled.div(ColorOuterButtonStyle);
-  padding: '5px',
+const InnerColorButton = styled.div(ColorInnerButtonStyle);
-  backgroundColor: '#fff',
-  borderRadius: '5px',
-  boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
-  display: 'inline-block',
-  cursor: 'pointer',
-});
-
-const InnerColorButton = styled.div({
-  width: '36px',
-  height: '14px',
-  borderRadius: '2px',
-});
 
 class ColorInspector extends React.Component<{color: Color}> {
   state: State = {

desktop/plugins/public/ui-debugger/components/sidebar/inspector/Coordinate3DInspector.tsx

@@ -10,7 +10,12 @@
 import React from 'react';
 import {Coordinate3D} from '../../../types';
 import {Col, Row} from 'antd';
-import {theme} from 'flipper-plugin';
+import {
+  CenteredContentStyle,
+  CenteredHeadingContentStyle,
+  CenteredNumberStyle,
+  CenteredTextStyle,
+} from './Styles';
 
 type Props = {
   value: Coordinate3D;
@@ -19,45 +24,25 @@ type Props = {
 const Coordinate3DInspector: React.FC<Props> = ({value}) => {
   return (
     <>
-      <Row
+      <Row style={CenteredHeadingContentStyle}>
-        style={{
+        <Col span={8} style={CenteredTextStyle}>
-          fontSize: theme.fontSize.small,
-          paddingLeft: '20%',
-          paddingRight: '20%',
-        }}>
-        <Col span={8} style={{textAlign: 'center'}}>
           x
         </Col>
-        <Col span={8} style={{textAlign: 'center'}}>
+        <Col span={8} style={CenteredTextStyle}>
           y
         </Col>
-        <Col span={8} style={{textAlign: 'center'}}>
+        <Col span={8} style={CenteredTextStyle}>
           z
         </Col>
       </Row>
-      <Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
+      <Row style={CenteredContentStyle}>
-        <Col
+        <Col span={8} style={CenteredNumberStyle}>
-          span={8}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.x}
         </Col>
-        <Col
+        <Col span={8} style={CenteredNumberStyle}>
-          span={8}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.y}
         </Col>
-        <Col
+        <Col span={8} style={CenteredNumberStyle}>
-          span={8}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.z}
         </Col>
       </Row>

desktop/plugins/public/ui-debugger/components/sidebar/inspector/CoordinateInspector.tsx

@@ -10,7 +10,12 @@
 import React from 'react';
 import {Coordinate} from '../../../types';
 import {Col, Row} from 'antd';
-import {theme} from 'flipper-plugin';
+import {
+  CenteredContentStyle,
+  CenteredHeadingContentStyle,
+  CenteredNumberStyle,
+  CenteredTextStyle,
+} from './Styles';
 
 type Props = {
   value: Coordinate;
@@ -19,34 +24,19 @@ type Props = {
 const CoordinateInspector: React.FC<Props> = ({value}) => {
   return (
     <>
-      <Row
+      <Row style={CenteredHeadingContentStyle}>
-        style={{
+        <Col span={12} style={CenteredTextStyle}>
-          fontSize: theme.fontSize.small,
-          paddingLeft: '20%',
-          paddingRight: '20%',
-        }}>
-        <Col span={12} style={{textAlign: 'center'}}>
           x
         </Col>
-        <Col span={12} style={{textAlign: 'center'}}>
+        <Col span={12} style={CenteredTextStyle}>
           y
         </Col>
       </Row>
-      <Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
+      <Row style={CenteredContentStyle}>
-        <Col
+        <Col span={12} style={CenteredNumberStyle}>
-          span={12}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.x}
         </Col>
-        <Col
+        <Col span={12} style={CenteredNumberStyle}>
-          span={12}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.y}
         </Col>
       </Row>

desktop/plugins/public/ui-debugger/components/sidebar/inspector/DefaultInspectorContainer.tsx

@@ -9,21 +9,14 @@
 
 import React from 'react';
 import {Col, Row} from 'antd';
-import {styled, theme} from 'flipper-plugin';
+import {styled} from 'flipper-plugin';
+import {DefaultInputContainerStyle} from './Styles';
 
 type Props = {
   name: string;
 };
 
-export const DefaultInputContainer = styled.div({
+export const DefaultInputContainer = styled.div(DefaultInputContainerStyle);
-  margin: 'auto',
-  padding: '2px',
-  minWidth: '50px',
-  backgroundColor: theme.backgroundDefault,
-  borderRadius: '5px',
-  boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
-  display: 'inline-block',
-});
 
 export const DefaultInspectorContainer: React.FC<Props> = (props) => {
   return (

desktop/plugins/public/ui-debugger/components/sidebar/inspector/IdentityInspector.tsx

@@ -10,33 +10,44 @@
 import React from 'react';
 import {Col, Row} from 'antd';
 import {UINode} from '../../../types';
-import {styled} from 'flipper-plugin';
+import {styled, theme} from 'flipper-plugin';
 import {CodeInspector} from './fb-stubs/CodeInspector';
+import {TopSpacedContainerStyle} from './Styles';
 
 type Props = {
   node: UINode;
 };
 
-const IdentityContainer = styled.div({
+const IdentityContainer = styled.div(TopSpacedContainerStyle);
-  marginTop: '10px',
-});
 
 export const IdentityInspector: React.FC<Props> = ({node}) => {
   return (
     <IdentityContainer>
       <Row gutter={4}>
-        <Col span="12">
+        <Col span="10">
           <div style={{padding: '0 16px'}}>Name:</div>
         </Col>
-        <Col span="12">{node.name}</Col>
+        <Col span="14" style={{fontSize: theme.fontSize.small}}>
+          {node.name}
+        </Col>
       </Row>
       <Row gutter={4}>
-        <Col span="12">
+        <Col span="10">
+          <div style={{padding: '0 16px'}}>Qualified name:</div>
+        </Col>
+        <Col span="14" style={{fontSize: theme.fontSize.small}}>
+          {node.qualifiedName}
+        </Col>
+      </Row>
+      <Row gutter={4}>
+        <Col span="10">
           <div style={{padding: '0 16px'}}>Id:</div>
         </Col>
-        <Col span="12">{node.id}</Col>
+        <Col span="14" style={{fontSize: theme.fontSize.small}}>
+          {node.id}
+        </Col>
       </Row>
-      <CodeInspector name={node.name} tags={node.tags} />
+      <CodeInspector name={node.qualifiedName} tags={node.tags} />
     </IdentityContainer>
   );
 };

desktop/plugins/public/ui-debugger/components/sidebar/inspector/SizeInspector.tsx

@@ -10,7 +10,12 @@
 import React from 'react';
 import {Size} from '../../../types';
 import {Col, Row} from 'antd';
-import {theme} from 'flipper-plugin';
+import {
+  CenteredContentStyle,
+  CenteredHeadingContentStyle,
+  CenteredNumberStyle,
+  CenteredTextStyle,
+} from './Styles';
 
 type Props = {
   value: Size;
@@ -19,34 +24,19 @@ type Props = {
 const SizeInspector: React.FC<Props> = ({value}) => {
   return (
     <>
-      <Row
+      <Row style={CenteredHeadingContentStyle}>
-        style={{
+        <Col span={12} style={CenteredTextStyle}>
-          fontSize: theme.fontSize.small,
-          paddingLeft: '20%',
-          paddingRight: '20%',
-        }}>
-        <Col span={12} style={{textAlign: 'center'}}>
           width
         </Col>
-        <Col span={12} style={{textAlign: 'center'}}>
+        <Col span={12} style={CenteredTextStyle}>
           height
         </Col>
       </Row>
-      <Row style={{paddingLeft: '20%', paddingRight: '20%'}}>
+      <Row style={CenteredContentStyle}>
-        <Col
+        <Col span={12} style={CenteredNumberStyle}>
-          span={12}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.width}
         </Col>
-        <Col
+        <Col span={12} style={CenteredNumberStyle}>
-          span={12}
-          style={{
-            textAlign: 'center',
-            color: theme.semanticColors.numberValue,
-          }}>
           {value.height}
         </Col>
       </Row>

desktop/plugins/public/ui-debugger/components/sidebar/inspector/SpaceBoxInspector.tsx

@@ -9,6 +9,7 @@
 
 import React from 'react';
 import {SpaceBox} from '../../../types';
+import {InspectorStyle} from './Styles';
 
 type Props = {
   size?: number;
@@ -21,12 +22,12 @@ type Props = {
 };
 
 const SpaceBoxInspector: React.FC<Props> = ({
-  size = 180,
+  size = InspectorStyle.spaceBox.size,
-  strokeColor = '#4A5967',
+  strokeColor = InspectorStyle.strokeColor,
-  outerBoxColor = '#F2F3F7',
+  outerBoxColor = InspectorStyle.outerFillColor,
-  innerBoxColor = '#CCD1D9',
+  innerBoxColor = InspectorStyle.innerFillColor,
-  margin = 10,
+  margin = InspectorStyle.spaceBox.margin,
-  separator = 4,
+  separator = InspectorStyle.spaceBox.separator,
   value,
 }) => {
   const half = size / 2;

desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import {theme} from 'flipper-plugin';
+
+export const InspectorStyle = {
+  strokeColor: '#4A5967',
+  outerFillColor: '#F2F3F7',
+  innerFillColor: '#CCD1D9',
+  spaceBox: {
+    size: 180,
+    margin: 10,
+    separator: 4,
+  },
+  bounds: {
+    size: 180,
+    multiplier: 0.4,
+    margin: 4,
+    separator: 10,
+  },
+} as const;
+
+export const RowStyle = {
+  marginTop: 4,
+  marginBottom: 4,
+  borderStyle: 'solid',
+  borderColor: theme.dividerColor,
+  borderWidth: '0 0 1px 0',
+} as const;
+
+export const ObjectContainerStyle = {
+  borderLeftWidth: 5,
+  borderLeftColor: 'lightgray',
+  borderLeftStyle: 'solid',
+} as const;
+
+export const DefaultInputContainerStyle = {
+  margin: 'auto',
+  padding: '2px',
+  minWidth: '50px',
+  backgroundColor: theme.backgroundDefault,
+  borderRadius: '5px',
+  boxShadow: '0 0 0 1px rgba(0,0,0,.2)',
+  display: 'inline-block',
+} as const;
+
+export const NumberAttributeValueStyle = {
+  color: theme.semanticColors.numberValue,
+  display: 'flex',
+} as const;
+
+export const TextAttributeValueStyle = {
+  color: theme.semanticColors.stringValue,
+  display: 'flex',
+} as const;
+
+export const EnumAttributeValueStyle = {
+  color: theme.semanticColors.stringValue,
+  fontSize: theme.fontSize.small,
+  margin: 'auto',
+} as const;
+
+export const CenteredNumberStyle = {
+  textAlign: 'center',
+  color: theme.semanticColors.numberValue,
+} as const;
+
+export const CenteredTextStyle = {
+  textAlign: 'center',
+} as const;
+
+export const CenteredContentStyle = {
+  paddingLeft: '20%',
+  paddingRight: '20%',
+} as const;
+
+export const CenteredHeadingContentStyle = {
+  ...CenteredContentStyle,
+  fontSize: theme.fontSize.small,
+} as const;
+
+export const ColorOuterButtonStyle = {
+  padding: '5px',
+  backgroundColor: '#fff',
+  borderRadius: '5px',
+  boxShadow: '0 0 0 1px rgba(0,0,0,.1)',
+  display: 'inline-block',
+  cursor: 'pointer',
+} as const;
+
+export const ColorInnerButtonStyle = {
+  width: '36px',
+  height: '14px',
+  borderRadius: '2px',
+} as const;
+
+export const AutoMarginStyle = {
+  margin: 'auto',
+} as const;
+
+export const TopSpacedContainerStyle = {
+  marginTop: 10,
+} as const;