From 4e302d65926cac970a99520a92f5aae69a858a57 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Sat, 25 Apr 2020 18:29:48 +0200
Subject: [PATCH 1/9] Start MVP for showing inspected element key

---
 .../views/Components/InspectedElementTree.js        |  2 +-
 .../devtools/views/Components/SelectedElement.js    | 13 +++++++++++++
 .../src/devtools/views/Components/types.js          |  1 +
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index 6e480a80ed19d..1a0e21829154f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -78,7 +78,7 @@ export default function InspectedElementTree({
     return (
       <div className={styles.InspectedElementTree}>
         <div className={styles.HeaderRow}>
-          <div className={styles.Header}>{label}</div>
+          {label && <div className={styles.Header}>{label}</div>}
           {!isEmpty && (
             <Button onClick={handleCopy} title="Copy to clipboard">
               <ButtonIcon type="copy" />
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index ae0ef9493a6c9..8bbc39cde8108 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -284,6 +284,7 @@ function InspectedElementView({
     props,
     source,
     state,
+    key,
   } = inspectedElement;
 
   const {ownerID} = useContext(TreeStateContext);
@@ -301,6 +302,12 @@ function InspectedElementView({
     },
     [getInspectedElementPath, id],
   );
+  const inspectKeyPath = useCallback(
+    (path: Array<string | number>) => {
+      getInspectedElementPath(id, ['key', ...path]);
+    },
+    [getInspectedElementPath, id],
+  );
   const inspectPropsPath = useCallback(
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['props', ...path]);
@@ -378,6 +385,12 @@ function InspectedElementView({
           showWhenEmpty={true}
           canAddEntries={typeof overridePropsFn === 'function'}
         />
+        <InspectedElementTree
+          label=""
+          data={{key: key}}
+          inspectPath={inspectKeyPath}
+          pathRoot="key"
+        />
         {type === ElementTypeSuspense ? (
           <InspectedElementTree
             label="suspense"
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/types.js b/packages/react-devtools-shared/src/devtools/views/Components/types.js
index 6e57fec8adcad..cb50af783e397 100644
--- 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,

From 13566bea52e62e2a39109ff5a6d404ad3b2f1433 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Sat, 25 Apr 2020 18:42:50 +0200
Subject: [PATCH 2/9] Add key in other places

---
 packages/react-devtools-shared/src/backend/types.js             | 1 +
 .../src/devtools/views/Components/InspectedElementContext.js    | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/packages/react-devtools-shared/src/backend/types.js b/packages/react-devtools-shared/src/backend/types.js
index 81521bd577c4a..4b5091e3bf532 100644
--- 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
index 9e62f9e262849..86a9a06d3f4c8 100644
--- 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 = {
@@ -241,6 +242,7 @@ function InspectedElementContextController({children}: Props) {
             hooks: hydrateHelper(hooks),
             props: hydrateHelper(props),
             state: hydrateHelper(state),
+            key: hydrateHelper(key),
           };
 
           element = store.getElementByID(id);

From 8fcd520ab45d85195cc0a23f32678e4cbe9c70e9 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Sun, 26 Apr 2020 10:19:59 +0200
Subject: [PATCH 3/9] Add key from backend

---
 packages/react-devtools-shared/src/backend/legacy/renderer.js | 4 +++-
 packages/react-devtools-shared/src/backend/renderer.js        | 3 +++
 .../src/devtools/views/Components/InspectedElementContext.js  | 1 +
 3 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/backend/legacy/renderer.js b/packages/react-devtools-shared/src/backend/legacy/renderer.js
index 093fa831222e5..bf8f809c8515b 100644
--- 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
index ae25089d71bce..ec3cf61b6548b 100644
--- 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/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index 86a9a06d3f4c8..b2bab91d643d4 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -219,6 +219,7 @@ function InspectedElementContextController({children}: Props) {
             canViewSource,
             hasLegacyContext,
             id,
+            key,
             source,
             type,
             owners:

From 0d2b474edcbd26decc6b0b716387d7233adaeec6 Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Sun, 26 Apr 2020 10:20:14 +0200
Subject: [PATCH 4/9] Remove unnecessary hydrateHelper call

---
 .../src/devtools/views/Components/InspectedElementContext.js     | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
index b2bab91d643d4..c88cc35438393 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
@@ -243,7 +243,6 @@ function InspectedElementContextController({children}: Props) {
             hooks: hydrateHelper(hooks),
             props: hydrateHelper(props),
             state: hydrateHelper(state),
-            key: hydrateHelper(key),
           };
 
           element = store.getElementByID(id);

From dcffc435777a1d384ced971e44173dd6c6e264bd Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Sun, 26 Apr 2020 10:20:31 +0200
Subject: [PATCH 5/9] Hide copy button when no label

---
 .../views/Components/InspectedElementTree.js   | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index 1a0e21829154f..43f00dede92c7 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -77,14 +77,16 @@ export default function InspectedElementTree({
   } else {
     return (
       <div className={styles.InspectedElementTree}>
-        <div className={styles.HeaderRow}>
-          {label && <div className={styles.Header}>{label}</div>}
-          {!isEmpty && (
-            <Button onClick={handleCopy} title="Copy to clipboard">
-              <ButtonIcon type="copy" />
-            </Button>
-          )}
-        </div>
+        {label && (
+          <div className={styles.HeaderRow}>
+            <div className={styles.Header}>{label}</div>
+            {!isEmpty && (
+              <Button onClick={handleCopy} title="Copy to clipboard">
+                <ButtonIcon type="copy" />
+              </Button>
+            )}
+          </div>
+        )}
         {isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
         {!isEmpty &&
           (entries: any).map(([name, value]) => (

From 1122194002eb93845eaa2dbf77d695b46cd3f3bb Mon Sep 17 00:00:00 2001
From: Karl Horky <karl.horky@gmail.com>
Date: Sun, 26 Apr 2020 10:20:54 +0200
Subject: [PATCH 6/9] Move above props

---
 .../devtools/views/Components/SelectedElement.js   | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 8bbc39cde8108..6dca4af203829 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
@@ -376,6 +376,14 @@ function InspectedElementView({
     <Fragment>
       <div className={styles.InspectedElement}>
         <HocBadges element={element} />
+        {key && (
+          <InspectedElementTree
+            label=""
+            data={{key: key}}
+            inspectPath={inspectKeyPath}
+            pathRoot="key"
+          />
+        )}
         <InspectedElementTree
           label="props"
           data={props}
@@ -385,12 +393,6 @@ function InspectedElementView({
           showWhenEmpty={true}
           canAddEntries={typeof overridePropsFn === 'function'}
         />
-        <InspectedElementTree
-          label=""
-          data={{key: key}}
-          inspectPath={inspectKeyPath}
-          pathRoot="key"
-        />
         {type === ElementTypeSuspense ? (
           <InspectedElementTree
             label="suspense"

From 932fba409b760cae8f7bb196a2caabd13e14871c Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 11 May 2020 11:55:17 -0700
Subject: [PATCH 7/9] Revert changes to InspectedElementTree.js

---
 .../views/Components/InspectedElementTree.js   | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
index 43f00dede92c7..6e480a80ed19d 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
+++ b/packages/react-devtools-shared/src/devtools/views/Components/InspectedElementTree.js
@@ -77,16 +77,14 @@ export default function InspectedElementTree({
   } else {
     return (
       <div className={styles.InspectedElementTree}>
-        {label && (
-          <div className={styles.HeaderRow}>
-            <div className={styles.Header}>{label}</div>
-            {!isEmpty && (
-              <Button onClick={handleCopy} title="Copy to clipboard">
-                <ButtonIcon type="copy" />
-              </Button>
-            )}
-          </div>
-        )}
+        <div className={styles.HeaderRow}>
+          <div className={styles.Header}>{label}</div>
+          {!isEmpty && (
+            <Button onClick={handleCopy} title="Copy to clipboard">
+              <ButtonIcon type="copy" />
+            </Button>
+          )}
+        </div>
         {isEmpty && !canAddEntries && <div className={styles.Empty}>None</div>}
         {!isEmpty &&
           (entries: any).map(([name, value]) => (

From d61fbdc1db42b4ee6a04e28ee7d2f825419d724a Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 11 May 2020 11:55:40 -0700
Subject: [PATCH 8/9] Move key to left of component name

---
 .../views/Components/SelectedElement.js       | 24 +++++++------------
 1 file changed, 9 insertions(+), 15 deletions(-)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
index 6dca4af203829..40f45334e61d5 100644
--- 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}
@@ -284,7 +293,6 @@ function InspectedElementView({
     props,
     source,
     state,
-    key,
   } = inspectedElement;
 
   const {ownerID} = useContext(TreeStateContext);
@@ -302,12 +310,6 @@ function InspectedElementView({
     },
     [getInspectedElementPath, id],
   );
-  const inspectKeyPath = useCallback(
-    (path: Array<string | number>) => {
-      getInspectedElementPath(id, ['key', ...path]);
-    },
-    [getInspectedElementPath, id],
-  );
   const inspectPropsPath = useCallback(
     (path: Array<string | number>) => {
       getInspectedElementPath(id, ['props', ...path]);
@@ -376,14 +378,6 @@ function InspectedElementView({
     <Fragment>
       <div className={styles.InspectedElement}>
         <HocBadges element={element} />
-        {key && (
-          <InspectedElementTree
-            label=""
-            data={{key: key}}
-            inspectPath={inspectKeyPath}
-            pathRoot="key"
-          />
-        )}
         <InspectedElementTree
           label="props"
           data={props}

From 299b2cf99bb4010afad61f6863976a7997a82a64 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Mon, 11 May 2020 11:58:01 -0700
Subject: [PATCH 9/9] Updated CSS

---
 .../views/Components/SelectedElement.css      | 27 +++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css b/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
index eaf5ac4a33a3c..377a428e96cfc 100644
--- 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 {