From f542f879d61ecc0dacc9dee350a099990ecea6b4 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 29 Jan 2019 14:04:00 -0800
Subject: [PATCH] Added inline comments for types

---
 src/devtools/types.js | 40 +++++++++++++++++++++++++++++++++-------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/devtools/types.js b/src/devtools/types.js
index a077523611..904a415ad1 100644
--- a/src/devtools/types.js
+++ b/src/devtools/types.js
@@ -11,31 +11,57 @@ export const ElementTypeProfiler = 6;
 export const ElementTypeRoot = 7;
 export const ElementTypeSuspense = 8;
 
+// Different types of elements displayed in the Elements tree.
+// These types may be used to visually distinguish types,
+// or to enable/disable certain functionality.
 export type ElementType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
 
-// TODO: Add profiling node
-
+// Each element on the frontend corresponds to a Fiber on the backend.
+// Some of its information (e.g. id, type, displayName) come from the backend.
+// Other bits (e.g. weight and depth) are computed on the frontend for windowing and display purposes.
+// Elements are udpated on a push basis– meaning the backend pushes updates to the frontend when needed.
 export type Element = {|
-  children: Array<number>,
-  depth: number,
-  displayName: string | null,
   id: number,
-  key: number | string | null,
   parentID: number,
+  children: Array<number>,
   type: ElementType,
+  displayName: string | null,
+  key: number | string | null,
+
+  // How many levels deep within the tree is this element?
+  // This determines how much indentation (left padding) should be used in the Elements tree.
+  depth: number,
+
+  // How many nodes (including itself) are below this Element within the tree.
+  // This property is used to quickly determine the total number of Elements,
+  // and the Element at any given index (for windowing purposes).
   weight: number,
 |};
 
 export type InspectedElement = {|
   id: number,
+
+  // Does the current renderer support editable props/state/hooks?
+  canEditValues: boolean,
+
+  // Inspectable properties.
   context: Object | null,
   hooks: Object | null,
   props: Object | null,
   state: Object | null,
-  canEditProps: boolean,
+
+  // List of owners
+  owners: Array<number>,
+
+  // Location of component in source coude.
   source: Object,
 |};
 
+// TODO: Add profiling type
+
+// The frontend Store is mutable.
+// This wrapper object is recreated whenever the store's tree is mutated.
+// It is used to trigger a re-render of the virtualized Elements tree.
 export type TreeMetadataType = {|
   size: number,
   store: Store,