Removed 'reactInternal' reference in DevTools overlay highlighter (#17841)
Brian Vaughn committed
Jan 14, 2020 at 15:38 UTC
8aefb1995cc6d46cc29778b0c54bd989478973c0
4 files changed
+37
-34
packages/react-devtools-shared/src/backend/legacy/renderer.js
+6
@@ -159,6 +159,11 @@ export function attach(
159
};
160
}
161
162
+ function getDisplayNameForFiberID(id: number): string | null {
163
+ const internalInstance = idToInternalInstanceMap.get(id);
164
+ return internalInstance ? getData(internalInstance).displayName : null;
165
+ }
166
+
167
function getID(internalInstance: InternalInstance): number {
168
if (typeof internalInstance !== 'object') {
169
throw new Error('Invalid internal instance: ' + internalInstance);
@@ -964,6 +969,7 @@ export function attach(
969
copyElementPath,
970
flushInitialOperations,
971
getBestMatchForTrackedPath,
972
+ getDisplayNameForFiberID,
973
getFiberIDForNative: getInternalIDForNative,
974
getInstanceAndStyle,
975
findNativeNodesForFiberID: (id: number) => {
packages/react-devtools-shared/src/backend/renderer.js
+6
@@ -1907,6 +1907,11 @@ export function attach(
1907
}
1908
}
1909
1910
+ function getDisplayNameForFiberID(id) {
1911
+ const fiber = idToFiberMap.get(id);
1912
+ return fiber != null ? getDisplayNameForFiber(((fiber: any): Fiber)) : null;
1913
+ }
1914
+
1915
function getFiberIDForNative(
1916
hostInstance,
1917
findNearestUnfilteredAncestor = false,
@@ -3179,6 +3184,7 @@ export function attach(
3184
findNativeNodesForFiberID,
3185
flushInitialOperations,
3186
getBestMatchForTrackedPath,
3187
+ getDisplayNameForFiberID,
3188
getFiberIDForNative,
3189
getInstanceAndStyle,
3190
getOwnersList,
packages/react-devtools-shared/src/backend/types.js
+6
@@ -39,6 +39,11 @@ export type RendererID = number;
39
40
type Dispatcher = any;
41
42
+export type GetDisplayNameForFiberID = (
43
+ id: number,
44
+ findNearestUnfilteredAncestor?: boolean,
45
+) => string | null;
46
+
47
export type GetFiberIDForNative = (
48
component: NativeType,
49
findNearestUnfilteredAncestor?: boolean,
@@ -225,6 +230,7 @@ export type RendererInterface = {
230
flushInitialOperations: () => void,
231
getBestMatchForTrackedPath: () => PathMatch | null,
232
getFiberIDForNative: GetFiberIDForNative,
233
+ getDisplayNameForFiberID: GetDisplayNameForFiberID,
234
getInstanceAndStyle(id: number): InstanceAndStyle,
235
getProfilingData(): ProfilingDataBackend,
236
getOwnersList: (id: number) => Array<Owner> | null,
packages/react-devtools-shared/src/backend/views/Highlighter/Overlay.js
+19
-34
@@ -10,6 +10,7 @@
10
import assign from 'object-assign';
11
import {getElementDimensions, getNestedBoundingClientRect} from '../utils';
12
13
+import type {DevToolsHook} from 'react-devtools-shared/src/backend/types';
14
import type {Rect} from '../utils';
15
16
type Box = {|top: number, left: number, width: number, height: number|};
@@ -226,9 +227,24 @@ export default class Overlay {
227
228
if (!name) {
229
name = elements[0].nodeName.toLowerCase();
229
- const ownerName = getOwnerDisplayName(elements[0]);
230
- if (ownerName) {
231
- name += ' (in ' + ownerName + ')';
230
+
231
+ const node = elements[0];
232
+ const hook: DevToolsHook =
233
+ node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__;
234
+ if (hook != null && hook.rendererInterfaces != null) {
235
+ let ownerName = null;
236
+ // eslint-disable-next-line no-for-of-loops/no-for-of-loops
237
+ for (const rendererInterface of hook.rendererInterfaces.values()) {
238
+ const id = rendererInterface.getFiberIDForNative(node, true);
239
+ if (id !== null) {
240
+ ownerName = rendererInterface.getDisplayNameForFiberID(id, true);
241
+ break;
242
+ }
243
+ }
244
+
245
+ if (ownerName) {
246
+ name += ' (in ' + ownerName + ')';
247
+ }
248
}
249
}
250
@@ -259,37 +275,6 @@ export default class Overlay {
275
}
276
}
277
262
-function getOwnerDisplayName(node) {
263
- const fiber = getFiber(node);
264
- if (fiber === null) {
265
- return null;
266
- }
267
- const owner = fiber._debugOwner;
268
- if (owner && owner.type) {
269
- const ownerName = owner.type.displayName || owner.type.name;
270
- return ownerName || null;
271
- }
272
- return null;
273
-}
274
-
275
-let lastFoundInternalKey = null;
276
-function getFiber(node) {
277
- if (
278
- lastFoundInternalKey !== null &&
279
- node.hasOwnProperty(lastFoundInternalKey)
280
- ) {
281
- return (node: any)[lastFoundInternalKey];
282
- }
283
- let internalKey = Object.keys(node).find(
284
- key => key.indexOf('__reactInternalInstance') === 0,
285
- );
286
- if (internalKey) {
287
- lastFoundInternalKey = internalKey;
288
- return (node: any)[lastFoundInternalKey];
289
- }
290
- return null;
291
-}
292
-
278
function findTipPos(dims, bounds, tipSize) {
279
const tipHeight = Math.max(tipSize.height, 20);
280
const tipWidth = Math.max(tipSize.width, 60);