Attributes Metadata

Summary:
Before this change, attributes and attribute metadata were intermingled and sent as one unit via subtree update event.

This represented a few issues:
- Repetitiveness. For each declared and dynamic attribute, metadata was included on each value unit.
- Metadata can vary in size and thus can have a negative impact on payload size.
- The attribute name which is part of metadata is a string which always overhead on processing.
- Metadata instantiation is not cheap thus this also incurs in processing overhead i.e. even instantiating a single string can have an impact.

The proposal is to separate metadata of attributes from the actual node reported attributes. This solves the problems mentioned above.

Reviewed By: LukeDefeo

Differential Revision: D40674156

fbshipit-source-id: 0788551849fbce53065f819ba503e7e4afc03cc0

desktop/plugins/public/ui-debugger/components/sidebar/Inspector.tsx

@@ -11,16 +11,17 @@ import React from 'react';
 // eslint-disable-next-line rulesdir/no-restricted-imports-clone
 import {Glyph} from 'flipper';
 import {Layout, Tab, Tabs} from 'flipper-plugin';
-import {UINode} from '../../types';
+import {Metadata, MetadataId, UINode} from '../../types';
 import {IdentityInspector} from './inspector/IdentityInspector';
 import {AttributesInspector} from './inspector/AttributesInspector';
 import {DocumentationInspector} from './inspector/DocumentationInspector';
 
 type Props = {
   node: UINode;
+  metadata: Map<MetadataId, Metadata>;
 };
 
-export const Inspector: React.FC<Props> = ({node}) => {
+export const Inspector: React.FC<Props> = ({node, metadata}) => {
   return (
     <Layout.Container gap pad>
       <Tabs grow centered>
@@ -38,7 +39,11 @@ export const Inspector: React.FC<Props> = ({node}) => {
               <Glyph name="data-table" size={16} />
             </Layout.Horizontal>
           }>
-          <AttributesInspector mode="attributes" node={node} />
+          <AttributesInspector
+            mode="attribute"
+            node={node}
+            metadata={metadata}
+          />
         </Tab>
         <Tab
           tab={
@@ -46,7 +51,7 @@ export const Inspector: React.FC<Props> = ({node}) => {
               <Glyph name="square-ruler" size={16} />
             </Layout.Horizontal>
           }>
-          <AttributesInspector mode="layout" node={node} />
+          <AttributesInspector mode="layout" node={node} metadata={metadata} />
         </Tab>
         <Tab
           tab={