Devtools: Show inspectedElement key in right pane (facebook#18737)

karlhorky · bvaughn · web-flow · commit 2b9d7cf65fb5 · 2020-05-11T13:17:13.000-07:00
* Start MVP for showing inspected element key

* Add key in other places

* Add key from backend

* Remove unnecessary hydrateHelper call

* Hide copy button when no label

* Move above props

* Revert changes to InspectedElementTree.js

* Move key to left of component name

* Updated CSS

Co-authored-by: Brian Vaughn &lt;brian.david.vaughn@gmail.com&gt;
diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
@@ -731,7 +731,7 @@ export function attach(
       return null;
     }
 
-    const {displayName} = getData(internalInstance);
+    const {displayName, key} = getData(internalInstance);
     const type = getElementType(internalInstance);
 
     let context = null;
@@ -789,6 +789,8 @@ export function attach(
 
       type: type,
 
+      key: key != null ? key : null,
+
       // Inspectable properties.
       context,
       hooks: null,
diff --git a/packages/react-devtools-shared/src/backend/renderer.js b/packages/react-devtools-shared/src/backend/renderer.js
@@ -2143,6 +2143,7 @@ export function attach(
       _debugOwner,
       _debugSource,
       stateNode,
+      key,
       memoizedProps,
       memoizedState,
       tag,
@@ -2300,6 +2301,8 @@ export function attach(
       // Does the component have legacy context attached to it.
       hasLegacyContext,
 
+      key: key != null ? key : null,
+
       displayName: getDisplayNameForFiber(fiber),
       type: elementType,
 
diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
@@ -202,6 +202,7 @@ export type InspectedElement = {|
   hooks: Object | null,
   props: Object | null,
   state: Object | null,
+  key: number | string | null,
 
   // List of owners
   owners: Array<Owner> | null,
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -209,6 +209,7 @@ function InspectedElementContextController({children}: Props) {
             hooks,
             props,
             state,
+            key,
           } = ((data.value: any): InspectedElementBackend);
 
           const inspectedElement: InspectedElementFrontend = {
@@ -218,6 +219,7 @@ function InspectedElementContextController({children}: Props) {
             canViewSource,
             hasLegacyContext,
             id,
+            key,
             source,
             type,
             owners:
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
@@ -16,10 +16,37 @@
   padding: 0.5rem;
 }
 
+.Key {
+  flex: 0 1 auto;
+  padding-left: 0.25rem;
+  padding-right: 0.125rem;
+  line-height: 1rem;
+  border-top-left-radius: 0.125rem;
+  border-bottom-left-radius: 0.125rem;
+  display: inline-block;
+  background-color: var(--color-component-badge-background);
+  color: var(--color-text);
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+}
+
+.KeyArrow {
+  height: 1rem;
+  width: 1rem;
+  margin-right: -0.25rem;
+  border: 0.5rem solid transparent;
+  border-left: 0.5rem solid var(--color-component-badge-background);
+}
+
 .SelectedComponentName {
   flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
+  line-height: normal;
 }
 
 .Owners {
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -190,6 +190,15 @@ export default function SelectedElement(_: Props) {
   return (
     <div className={styles.SelectedElement}>
       <div className={styles.TitleRow}>
+        {element.key && (
+          <>
+            <div className={styles.Key} title={`key "${element.key}"`}>
+              {element.key}
+            </div>
+            <div className={styles.KeyArrow} />
+          </>
+        )}
+
         <div className={styles.SelectedComponentName}>
           <div className={styles.Component} title={element.displayName}>
             {element.displayName}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
@@ -79,6 +79,7 @@ export type InspectedElement = {|
   hooks: Object | null,
   props: Object | null,
   state: Object | null,
+  key: number | string | null,
 
   // List of owners
   owners: Array<Owner> | null,
