React: Bug: la mise en évidence du DOM DevTools reste bloquée après un survol prolongé

Un moyen plus simple de déclencher ceci:

1. Cliquez pour sélectionner un élément dans l'arborescence des composants
2. Déplacez votre souris en dehors des DevTools
3. Cliquez sur la flèche vers le haut ou vers le bas

Le surlignage "collera" maintenant jusqu'à ce que vous vous concentriez sur autre chose dans DevTools.

TBH, c'est un comportement attendu dans mon esprit, car il correspond à ce que fait le panneau Eléments du navigateur tant qu'un élément natif est soit survolé ou focalisé. ¹

Si nous le voulions, nous pourrions activer le masquage automatique après quelques secondes en mettant Tree jour
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... pour passer aussi hideAfterTimeout: true comme SelectedElement fait ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ Une petite mais peut-être importante différence entre les deux est que le panneau des éléments natifs ne semble pas laisser la surbrillance "bloquée" à la souris. Peut-être est-il plus fiable de détecter la souris en laissant toutes les limites des outils de développement? Peut-être pourrions-nous faire mieux d'une manière ou d'une autre?

Que son comportement attendu ou non le comportement entre Firefox et Chrome est incohérent puisque la mise en évidence ne reste pas bloquée sur Firefox.

Une petite mais peut-être importante différence entre les deux est que le panneau des éléments natifs ne semble pas laisser la surbrillance "bloquée" à la souris.

Je ne suis pas sûr de comprendre - c'est exactement ce sur quoi j'ai déposé le problème. :-) Alors oui, je pense que c'est une différence importante. Je rencontre ce problème tous les jours.

... pour passer également hideAfterTimeout: true comme le fait SelectedElement ...

Cela semble supprimer toujours la mise en évidence après quelques secondes. Cela résoudrait donc ce problème, mais en aggravant l'autre cas. Cela ne me semble pas une solution acceptable.

Idéalement, tout ce que je veux, c'est que la mise en évidence soit supprimée de manière fiable au moment même où je place mon curseur en dehors des DevTools . Tout comme le fait le natif.

Je comprends qu'il existe des cas extrêmes comme "et si je continue à utiliser le clavier" mais je ne les frappe pas tout le temps. En revanche, je frappais ce bug particulier (incohérente surligneur reset sur mouseout) chaque jour de nombreuses fois.

J'ai passé une demi-heure ici et je n'ai même pas une idée éloignée de la raison pour laquelle l'événement ne se déclenche pas. Demandons à Twitter. https://twitter.com/dan_abramov/status/1222178476817633282

J'en ai parlé sur Twitter , mais j'ai fouillé dans la source de devtools pour comprendre comment ils géraient les mouvements de la souris et mettaient en évidence les éléments DOM.

Il semble que l'endroit principal où les outils de développement mettent à jour l'état de survol se trouve dans leur gestionnaire _highlightTreeElement qui, fait intéressant, n'est référencé par aucun autre gestionnaire d'événements.

Quelques autres méthodes ( _onfocusout , _onmouseleave , _ondragstart et _reset ) appellent SDK.OverlayModel.hideDOMNodeHighlight() qui, comme son nom l'indique, supprime le mettre en évidence sur la page principale.

EDIT: J'ai oublié de mentionner que je voulais appeler les différents ensembles de gestionnaires d'événements car l'implémentation actuelle de itemData semble se lier à onMouseMove et onMouseLeave pour le moment. Les événements supplémentaires observés par devtools peuvent également rendre les choses un peu plus robustes si le glissement ou la gestion des changements de focus vous préoccupe.