Show owner in DOM highilght overlay
Dan committed
Apr 6, 2019 at 17:02 UTC
ab9c1b84c866017107894d72a67a000f9fb881e0
2 files changed
+42
-2
src/backend/agent.js
+2
-1
@@ -443,6 +443,7 @@ export default class Agent extends EventEmitter {
443
444
const target = ((event.target: any): HTMLElement);
445
446
- showOverlay(target, target.tagName.toLowerCase());
446
+ // Pass an empty string so it can infer name from tag and owner.
447
+ showOverlay(target, '');
448
};
449
}
src/backend/views/Overlay.js
+40
-1
@@ -128,7 +128,15 @@ export default class Overlay {
128
left: box.left - dims.marginLeft + 'px',
129
});
130
131
- this.nameSpan.textContent = name || node.nodeName.toLowerCase();
131
+ if (!name) {
132
+ name = node.nodeName.toLowerCase();
133
+ const ownerName = getOwnerDisplayName(node);
134
+ if (ownerName) {
135
+ name += ' (in ' + ownerName + ')';
136
+ }
137
+ }
138
+
139
+ this.nameSpan.textContent = name;
140
this.dimSpan.textContent =
141
Math.round(box.width) + 'px × ' + Math.round(box.height) + 'px';
142
@@ -145,6 +153,37 @@ export default class Overlay {
153
}
154
}
155
156
+function getOwnerDisplayName(node) {
157
+ const fiber = getFiber(node);
158
+ if (fiber === null) {
159
+ return null;
160
+ }
161
+ const owner = fiber._debugOwner;
162
+ if (owner && owner.type) {
163
+ const ownerName = owner.type.displayName || owner.type.name;
164
+ return ownerName || null;
165
+ }
166
+ return null;
167
+}
168
+
169
+let lastFoundInternalKey = null;
170
+function getFiber(node) {
171
+ if (
172
+ lastFoundInternalKey !== null &&
173
+ node.hasOwnProperty(lastFoundInternalKey)
174
+ ) {
175
+ return (node: any)[lastFoundInternalKey];
176
+ }
177
+ let internalKey = Object.keys(node).find(
178
+ key => key.indexOf('__reactInternalInstance') === 0
179
+ );
180
+ if (internalKey) {
181
+ lastFoundInternalKey = internalKey;
182
+ return (node: any)[lastFoundInternalKey];
183
+ }
184
+ return null;
185
+}
186
+
187
function findTipPos(dims, win) {
188
const tipHeight = 20;
189
const margin = 5;