-
Notifications
You must be signed in to change notification settings - Fork 45.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[DevTools] find best renderer when inspecting #24665
Changes from 6 commits
051a179
29841c9
276fc88
b7d225a
7a6b59f
975601b
48bba78
2e8c6c5
27b6756
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -309,22 +309,39 @@ export default class Agent extends EventEmitter<{| | |
return renderer.getInstanceAndStyle(id); | ||
} | ||
|
||
getIDForNode(node: Object): number | null { | ||
getBestMatchingRendererInterface(node: Object): RendererInterface | null { | ||
let bestMatch = null; | ||
for (const rendererID in this._rendererInterfaces) { | ||
const renderer = ((this._rendererInterfaces[ | ||
(rendererID: any) | ||
]: any): RendererInterface); | ||
|
||
try { | ||
const id = renderer.getFiberIDForNative(node, true); | ||
if (id !== null) { | ||
return id; | ||
const fiber = renderer.getFiberForNative(node); | ||
if (fiber != null) { | ||
// check if fiber.stateNode is matching the original hostInstance | ||
if (fiber.stateNode === node) { | ||
return renderer; | ||
} else { | ||
bestMatch = renderer; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Right now you're setting |
||
} | ||
} catch (error) { | ||
// Some old React versions might throw if they can't find a match. | ||
// If so we should ignore it... | ||
} | ||
} | ||
// if an exact match is not found, return the best match as fallback | ||
return bestMatch; | ||
} | ||
|
||
getIDForNode(node: Object): number | null { | ||
const rendererInterface = this.getBestMatchingRendererInterface(node); | ||
if (rendererInterface != null) { | ||
return rendererInterface.getFiberIDForNative(node, true); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Should we wrap this around a There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'll add it back for safety, but it looks pretty vague what exactly it's trying to catch. The comment says it's for old react, and commit itself is pretty old too. Do we know in which version this might cause an error, so we can get rid of it one day? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. That's a good question. I'm not sure. We're currently supporting React 16, which was released 5 years ago, so we're supporting pretty far back. I'm not sure exactly which version causes an error, but if you want to find out and add a comment that'd be great 😊 |
||
} | ||
return null; | ||
} | ||
|
||
getDisplayNameForNode(node: Object): string | null { | ||
const rendererInterface = this.getBestMatchingRendererInterface(node); | ||
if (rendererInterface != null) { | ||
return rendererInterface.getDisplayNameForFiberID(node, true); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Does this not require an ID? |
||
} | ||
return null; | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -81,6 +81,7 @@ export type GetFiberIDForNative = ( | |
component: NativeType, | ||
findNearestUnfilteredAncestor?: boolean, | ||
) => number | null; | ||
export type GetFiberForNative = (component: NativeType) => Fiber | null; | ||
export type FindNativeNodesForFiberID = (id: number) => ?Array<NativeType>; | ||
|
||
export type ReactProviderType<T> = { | ||
|
@@ -93,7 +94,7 @@ export type Lane = number; | |
export type Lanes = number; | ||
|
||
export type ReactRenderer = { | ||
findFiberByHostInstance: (hostInstance: NativeType) => ?Fiber, | ||
findFiberByHostInstance: (hostInstance: NativeType) => Fiber | null, | ||
version: string, | ||
rendererPackageName: string, | ||
bundleType: BundleType, | ||
|
@@ -350,6 +351,7 @@ export type RendererInterface = { | |
findNativeNodesForFiberID: FindNativeNodesForFiberID, | ||
flushInitialOperations: () => void, | ||
getBestMatchForTrackedPath: () => PathMatch | null, | ||
getFiberForNative: GetFiberForNative, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I understand why you're doing this (following prior precedent) but I personally think this would be more readable if |
||
getFiberIDForNative: GetFiberIDForNative, | ||
getDisplayNameForFiberID: GetDisplayNameForFiberID, | ||
getInstanceAndStyle(id: number): InstanceAndStyle, | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -9,13 +9,13 @@ | |
|
||
import {getElementDimensions, getNestedBoundingClientRect} from '../utils'; | ||
|
||
const assign = Object.assign; | ||
|
||
import type {DevToolsHook} from 'react-devtools-shared/src/backend/types'; | ||
import type {Rect} from '../utils'; | ||
import type Agent from 'react-devtools-shared/src/backend/agent'; | ||
|
||
type Box = {|top: number, left: number, width: number, height: number|}; | ||
|
||
const assign = Object.assign; | ||
|
||
// Note that the Overlay components are not affected by the active Theme, | ||
// because they highlight elements in the main Chrome window (outside of devtools). | ||
// The colors below were chosen to roughly match those used by Chrome devtools. | ||
|
@@ -153,8 +153,9 @@ export default class Overlay { | |
container: HTMLElement; | ||
tip: OverlayTip; | ||
rects: Array<OverlayRect>; | ||
agent: Agent; | ||
|
||
constructor() { | ||
constructor(agent: Agent) { | ||
// Find the root window, because overlays are positioned relative to it. | ||
const currentWindow = window.__REACT_DEVTOOLS_TARGET_WINDOW__ || window; | ||
this.window = currentWindow; | ||
|
@@ -170,6 +171,8 @@ export default class Overlay { | |
this.tip = new OverlayTip(doc, this.container); | ||
this.rects = []; | ||
|
||
this.agent = agent; | ||
|
||
doc.body.appendChild(this.container); | ||
} | ||
|
||
|
@@ -230,22 +233,10 @@ export default class Overlay { | |
name = elements[0].nodeName.toLowerCase(); | ||
|
||
const node = elements[0]; | ||
const hook: DevToolsHook = | ||
node.ownerDocument.defaultView.__REACT_DEVTOOLS_GLOBAL_HOOK__; | ||
if (hook != null && hook.rendererInterfaces != null) { | ||
let ownerName = null; | ||
// eslint-disable-next-line no-for-of-loops/no-for-of-loops | ||
for (const rendererInterface of hook.rendererInterfaces.values()) { | ||
const id = rendererInterface.getFiberIDForNative(node, true); | ||
if (id !== null) { | ||
ownerName = rendererInterface.getDisplayNameForFiberID(id, true); | ||
break; | ||
} | ||
} | ||
|
||
if (ownerName) { | ||
name += ' (in ' + ownerName + ')'; | ||
} | ||
const ownerName = this.agent.getDisplayNameForNode(node); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe instead of making |
||
|
||
if (ownerName) { | ||
name += ' (in ' + ownerName + ')'; | ||
} | ||
} | ||
|
||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
fiber !== null