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 <brian.david.vaughn@gmail.com>
Karl Horky committed
May 11, 2020 at 22:17 UTC
2b9d7cf65fb5423a972b5dc920a3341b865085bf
7 files changed
+46
-1
packages/react-devtools-shared/src/backend/legacy/renderer.js
+3
-1
@@ -731,7 +731,7 @@ export function attach(
731
return null;
732
}
733
734
- const {displayName} = getData(internalInstance);
734
+ const {displayName, key} = getData(internalInstance);
735
const type = getElementType(internalInstance);
736
737
let context = null;
@@ -789,6 +789,8 @@ export function attach(
789
790
type: type,
791
792
+ key: key != null ? key : null,
793
+
794
// Inspectable properties.
795
context,
796
hooks: null,
packages/react-devtools-shared/src/backend/renderer.js
+3
@@ -2143,6 +2143,7 @@ export function attach(
2143
_debugOwner,
2144
_debugSource,
2145
stateNode,
2146
+ key,
2147
memoizedProps,
2148
memoizedState,
2149
tag,
@@ -2300,6 +2301,8 @@ export function attach(
2301
// Does the component have legacy context attached to it.
2302
hasLegacyContext,
2303
2304
+ key: key != null ? key : null,
2305
+
2306
displayName: getDisplayNameForFiber(fiber),
2307
type: elementType,
2308
packages/react-devtools-shared/src/backend/types.js
+1
@@ -202,6 +202,7 @@ export type InspectedElement = {|
202
hooks: Object | null,
203
props: Object | null,
204
state: Object | null,
205
+ key: number | string | null,
206
207
// List of owners
208
owners: Array<Owner> | null,
packages/react-devtools-shared/src/devtools/views/Components/InspectedElementContext.js
+2
@@ -209,6 +209,7 @@ function InspectedElementContextController({children}: Props) {
209
hooks,
210
props,
211
state,
212
+ key,
213
} = ((data.value: any): InspectedElementBackend);
214
215
const inspectedElement: InspectedElementFrontend = {
@@ -218,6 +219,7 @@ function InspectedElementContextController({children}: Props) {
219
canViewSource,
220
hasLegacyContext,
221
id,
222
+ key,
223
source,
224
type,
225
owners:
packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.css
+27
@@ -16,10 +16,37 @@
16
padding: 0.5rem;
17
}
18
19
+.Key {
20
+ flex: 0 1 auto;
21
+ padding-left: 0.25rem;
22
+ padding-right: 0.125rem;
23
+ line-height: 1rem;
24
+ border-top-left-radius: 0.125rem;
25
+ border-bottom-left-radius: 0.125rem;
26
+ display: inline-block;
27
+ background-color: var(--color-component-badge-background);
28
+ color: var(--color-text);
29
+ font-family: var(--font-family-monospace);
30
+ font-size: var(--font-size-monospace-small);
31
+ white-space: nowrap;
32
+ overflow: hidden;
33
+ text-overflow: ellipsis;
34
+ max-width: 100%;
35
+}
36
+
37
+.KeyArrow {
38
+ height: 1rem;
39
+ width: 1rem;
40
+ margin-right: -0.25rem;
41
+ border: 0.5rem solid transparent;
42
+ border-left: 0.5rem solid var(--color-component-badge-background);
43
+}
44
+
45
.SelectedComponentName {
46
flex: 1 1 auto;
47
overflow: hidden;
48
text-overflow: ellipsis;
49
+ line-height: normal;
50
}
51
52
.Owners {
packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js
+9
@@ -190,6 +190,15 @@ export default function SelectedElement(_: Props) {
190
return (
191
<div className={styles.SelectedElement}>
192
<div className={styles.TitleRow}>
193
+ {element.key && (
194
+ <>
195
+ <div className={styles.Key} title={`key "${element.key}"`}>
196
+ {element.key}
197
+ </div>
198
+ <div className={styles.KeyArrow} />
199
+ </>
200
+ )}
201
+
202
<div className={styles.SelectedComponentName}>
203
<div className={styles.Component} title={element.displayName}>
204
{element.displayName}
packages/react-devtools-shared/src/devtools/views/Components/types.js
+1
@@ -79,6 +79,7 @@ export type InspectedElement = {|
79
hooks: Object | null,
80
props: Object | null,
81
state: Object | null,
82
+ key: number | string | null,
83
84
// List of owners
85
owners: Array<Owner> | null,