From ef64abb495bce4f441f4588ba58aee7ae3236ae4 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Wed, 23 Nov 2022 08:31:13 -0800
Subject: [PATCH] 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
---
 .../flipper/plugins/uidebugger/model/Types.kt |   2 +-
 .../sidebar/inspector/AttributesInspector.tsx |   9 +-
 .../sidebar/inspector/ColorInspector.tsx      | 115 +++++++++++++++---
 desktop/plugins/public/ui-debugger/types.tsx  |   2 +-
 4 files changed, 105 insertions(+), 23 deletions(-)

diff --git a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt b/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt
index fe5b87d06..abb447526 100644
--- a/android/src/main/java/com/facebook/flipper/plugins/uidebugger/model/Types.kt
+++ b/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
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
index 2b891063f..6c2e077e6 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
+++ b/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 color={inspectable.value} />
-        </NamedAttributeInspector>
+        <ColorInspector
+          name={displayableName(name)}
+          color={inspectable.value}
+        />
       );
     case 'size':
       return (
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
index 27054a841..6bc67cd5a 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/ColorInspector.tsx
+++ b/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 = {
-  color: RGBColor;
+type Props = {
+  name: string;
+  color: Color;
 };
 
+const DefaultColor: 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);
 
-class ColorInspector extends React.Component<{color: Color}> {
-  state: State = {
-    color: this.props.color ?? {
-      r: 255,
-      g: 255,
-      b: 255,
-      a: 1,
-    },
-  };
+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;
diff --git a/desktop/plugins/public/ui-debugger/types.tsx b/desktop/plugins/public/ui-debugger/types.tsx
index f712ba4d1..d1df5635b 100644
--- a/desktop/plugins/public/ui-debugger/types.tsx
+++ b/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;