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

* 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 <[email protected]>

Author: karlhorky

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,

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,
 

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,

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:

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 {

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}

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,