Improve color inspector

Summary:
Before this change, color inspector used a color picker that showed: color, rgba, hex.

The problem is that engineers have to click on it to see these values.

This change leaves the picker as is, but presents both hex and rgba inlined within the inspector thus avoiding extra interactions.

Reviewed By: antonk52

Differential Revision: D41495740

fbshipit-source-id: c8af01e3060d2e6725295418293b1e30679c1b1f

android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt

@@ -29,7 +29,7 @@ data class SpaceBox(val top: Int, val right: Int, val bottom: Int, val left: Int
 }
 
 @kotlinx.serialization.Serializable
-data class Color(val r: Int, val g: Int, val b: Int, val alpha: Int) {
+data class Color(val r: Int, val g: Int, val b: Int, val a: Int) {
   companion object {
     fun fromColor(color: Int): Color {
       val alpha: Int = (color shr 24) and 0xFF / 255

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

@@ -40,9 +40,11 @@ const TextValue = styled.span(TextAttributeValueStyle);
 const EnumValue = styled.span(EnumAttributeValueStyle);
 const ObjectContainer = styled.div(ObjectContainerStyle);
 const CenteredContentContainer = styled.div(AutoMarginStyle);
+
 type NamedAttributeInspectorProps = {
   name: string;
 };
+
 const NamedAttributeInspector: React.FC<NamedAttributeInspectorProps> = ({
   name,
   children,
@@ -119,9 +121,10 @@ function create(
       );
     case 'color':
       return (
-        <NamedAttributeInspector name={displayableName(name)}>
+        <ColorInspector
-          <ColorInspector color={inspectable.value} />
+          name={displayableName(name)}
-        </NamedAttributeInspector>
+          color={inspectable.value}
+        />
       );
     case 'size':
       return (

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

@@ -8,46 +8,65 @@
  */
 
 import React from 'react';
-import {Popover} from 'antd';
+import {Col, Popover, Row} from 'antd';
 import {Color} from '../../../types';
-import {SketchPicker, RGBColor, ColorResult} from 'react-color';
+import {SketchPicker, ColorResult} from 'react-color';
 import {styled} from 'flipper-plugin';
-import {ColorInnerButtonStyle, ColorOuterButtonStyle} from './Styles';
+import {
+  AutoMarginStyle,
+  ColorInnerButtonStyle,
+  ColorOuterButtonStyle,
+  NumberAttributeValueStyle,
+  ObjectContainerStyle,
+  RowStyle,
+} from './Styles';
+import {theme} from 'flipper-plugin';
 
-type State = {
+type Props = {
-  color: RGBColor;
+  name: string;
+  color: Color;
 };
 
-const OuterColorButton = styled.div(ColorOuterButtonStyle);
+const DefaultColor: Color = {
-const InnerColorButton = styled.div(ColorInnerButtonStyle);
-
-class ColorInspector extends React.Component<{color: Color}> {
-  state: State = {
-    color: this.props.color ?? {
   r: 255,
   g: 255,
   b: 255,
   a: 1,
-    },
+};
-  };
 
+const CenteredContentContainer = styled.div(AutoMarginStyle);
+const ObjectContainer = styled.div(ObjectContainerStyle);
+const NumberValue = styled.span(NumberAttributeValueStyle);
+const OuterColorButton = styled.div(ColorOuterButtonStyle);
+const InnerColorButton = styled.div(ColorInnerButtonStyle);
+
+const RGBA = styled.span({color: theme.semanticColors.numberValue});
+
+const RGBAtoHEX = (color: Color) => {
+  const hex =
+    (color.r | (1 << 8)).toString(16).slice(1) +
+    (color.g | (1 << 8)).toString(16).slice(1) +
+    (color.b | (1 << 8)).toString(16).slice(1);
+
+  return '#' + hex.toUpperCase();
+};
+
+class ColorPicker extends React.Component<{color: Color}> {
   handleChange = (_color: ColorResult) => {
     // No color changes to be applied at this stage.
-    // this.setState({color: color.rgb});
   };
-
   render() {
     return (
       <Popover
         placement="bottomRight"
         content={
-          <SketchPicker color={this.state.color} onChange={this.handleChange} />
+          <SketchPicker color={this.props.color} onChange={this.handleChange} />
         }
         trigger="click">
         <OuterColorButton role="button" tabIndex={0}>
           <InnerColorButton
             style={{
-              background: `rgba(${this.state.color.r}, ${this.state.color.g}, ${this.state.color.b}, ${this.state.color.a})`,
+              background: `rgba(${this.props.color.r}, ${this.props.color.g}, ${this.props.color.b}, ${this.props.color.a})`,
             }}
           />
         </OuterColorButton>
@@ -56,4 +75,64 @@ class ColorInspector extends React.Component<{color: Color}> {
   }
 }
 
+const ColorHEX: React.FC<{color: Color}> = ({color}) => (
+  <NumberValue>{RGBAtoHEX(color)}</NumberValue>
+);
+
+const ColorRGBA: React.FC<{color: Color}> = ({color}) => (
+  <>
+    r: <RGBA>{color.r}</RGBA> g: <RGBA>{color.g}</RGBA> b:{' '}
+    <RGBA>{color.b}</RGBA> a: <RGBA>{color.a}</RGBA>
+  </>
+);
+
+class ColorInspector extends React.Component<Props> {
+  render() {
+    return (
+      <>
+        <Row>
+          <Col span={8} style={AutoMarginStyle}>
+            {this.props.name}
+          </Col>
+          <Col span={16}>
+            <CenteredContentContainer>
+              <ColorPicker color={this.props.color} />
+            </CenteredContentContainer>
+          </Col>
+        </Row>
+        <Row style={RowStyle}>
+          <Col span={8} style={AutoMarginStyle}>
+            <ObjectContainer
+              style={{
+                paddingLeft: 2,
+              }}>
+              Hex
+            </ObjectContainer>
+          </Col>
+          <Col span={16}>
+            <CenteredContentContainer>
+              <ColorHEX color={this.props.color} />
+            </CenteredContentContainer>
+          </Col>
+        </Row>
+        <Row style={RowStyle}>
+          <Col span={8} style={AutoMarginStyle}>
+            <ObjectContainer
+              style={{
+                paddingLeft: 2,
+              }}>
+              RGBA
+            </ObjectContainer>
+          </Col>
+          <Col span={16}>
+            <CenteredContentContainer>
+              <ColorRGBA color={this.props.color} />
+            </CenteredContentContainer>
+          </Col>
+        </Row>
+      </>
+    );
+  }
+}
+
 export default ColorInspector;

desktop/plugins/public/ui-debugger/types.tsx

@@ -115,7 +115,7 @@ export type Color = {
   r: number;
   g: number;
   b: number;
-  alpha: number;
+  a: number;
 };
 
 export type Snapshot = string;