Continuously update tree selection in DOM inspection mode
Dan committed
Apr 6, 2019 at 20:25 UTC
785bb9f56c6d93f506bcf58ba1f6047efd931df1
1 file changed
+22
-3
src/backend/agent.js
+22
-3
@@ -49,6 +49,9 @@ export default class Agent extends EventEmitter {
49
_isProfiling: boolean = false;
50
_rendererInterfaces: { [key: RendererID]: RendererInterface } = {};
51
52
+ _selectInterval: null | IntervalID;
53
+ _nextFiberIDToSelect: null | number;
54
+
55
constructor() {
56
super();
57
@@ -339,6 +342,7 @@ export default class Agent extends EventEmitter {
342
window.addEventListener('mousedown', this._onMouseDown, true);
343
window.addEventListener('mouseup', this._onMouseUp, true);
344
window.addEventListener('mouseover', this._onMouseOver, true);
345
+ this._selectInterval = setInterval(this._updateSelectedFiber, 200);
346
};
347
348
startProfiling = () => {
@@ -359,6 +363,11 @@ export default class Agent extends EventEmitter {
363
window.removeEventListener('mousedown', this._onMouseDown, true);
364
window.removeEventListener('mouseup', this._onMouseUp, true);
365
window.removeEventListener('mouseover', this._onMouseOver, true);
366
+
367
+ this._updateSelectedFiber();
368
+ clearInterval(this._selectInterval);
369
+ this._selectInterval = null;
370
+ this._nextFiberIDToSelect = null;
371
};
372
373
stopProfiling = () => {
@@ -423,9 +432,8 @@ export default class Agent extends EventEmitter {
432
433
const target = ((event.target: any): HTMLElement);
434
const id = this.getIDForNode(target);
426
-
435
if (id !== null) {
428
- this._bridge.send('selectFiber', id);
436
+ this._nextFiberIDToSelect = id;
437
}
438
};
439
@@ -442,9 +450,20 @@ export default class Agent extends EventEmitter {
450
event.stopPropagation();
451
452
const target = ((event.target: any): HTMLElement);
445
-
453
// Don't pass the name explicitly.
454
// It will be inferred from DOM tag and Fiber owner.
455
showOverlay(target);
456
+
457
+ const id = this.getIDForNode(target);
458
+ if (id !== null) {
459
+ this._nextFiberIDToSelect = id;
460
+ }
461
+ };
462
+
463
+ _updateSelectedFiber = () => {
464
+ const id = this._nextFiberIDToSelect;
465
+ if (id !== null) {
466
+ this._bridge.send('selectFiber', id);
467
+ }
468
};
469
}