React: Bug: o realce do DOM do DevTools fica travado após um foco prolongado

Uma maneira mais fácil de acionar isso:

1. Clique para selecionar um elemento na árvore de componentes
2. Mova o mouse para fora das DevTools
3. Clique na seta para cima ou para baixo

O destaque agora vai "grudar" até que você se concentre em outra coisa no DevTools.

TBH, esse é o comportamento esperado em minha mente, porque corresponde ao que o painel Elementos do navegador faz, desde que um elemento nativo seja pairado ou focalizado. ¹

Se quiséssemos, poderíamos ativar a ocultação automática após alguns segundos, atualizando Tree ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... para também passar hideAfterTimeout: true como SelectedElement faz ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ Uma pequena, mas talvez importante diferença entre os dois é que o painel de elementos nativos não parece deixar o realce "preso" no mouse. Talvez seja mais confiável detectar o mouse, deixando todos os limites das ferramentas de desenvolvedor? Talvez pudéssemos fazer isso melhor de alguma forma?

Se seu comportamento esperado ou não, o comportamento entre o Firefox e o Chrome é inconsistente, uma vez que o realce não fica preso no Firefox.

Uma pequena, mas talvez importante diferença entre os dois é que o painel de elementos nativos não parece deixar o destaque "preso" no mouse.

Não tenho certeza se entendi - é exatamente sobre isso que apresentei o problema. :-) Então sim, acho que é uma diferença importante. Estou tendo esse problema todos os dias.

... para também passar hideAfterTimeout: true como o SelectedElement faz ...

Parece que sempre removeria o realce após alguns segundos. Portanto, isso resolveria esse problema, mas tornaria o outro caso pior. Isso não parece uma solução aceitável para mim.

Idealmente, tudo que eu quero é que o realce seja removido de forma confiável no momento em que coloco meu cursor fora das DevTools . Assim como o nativo faz.

Eu entendo que existem casos extremos como "e se eu continuar usando o teclado", mas eu não estou batendo neles o tempo todo. Por outro lado, estou encontrando esse bug específico (redefinir o realce inconsistentemente ao remover o mouse) todos os dias muitas vezes.

Passei meia hora aqui e não tenho nem ideia remota de por que o evento não dispara. Vamos perguntar ao twitter. https://twitter.com/dan_abramov/status/1222178476817633282

Mencionei isso no Twitter , mas vasculhei a fonte do devtools para descobrir como eles estavam lidando com o movimento do mouse e destacando os elementos DOM.

Parece que o local principal do devtools atualiza o estado de foco no manipulador _onmousemove . Essa função, por sua vez, chama _highlightTreeElement que, curiosamente, não é referenciado por nenhum outro manipulador de eventos.

Alguns outros métodos ( _onfocusout , _onmouseleave , _ondragstart , e _reset ) chamam SDK.OverlayModel.hideDOMNodeHighlight() que, como o nome indica, remove o destaque na página principal.

EDIT: Esqueci de mencionar que queria chamar a atenção para o conjunto diferente de manipuladores de eventos, pois a implementação atual de itemData parece vincular-se a onMouseMove e onMouseLeave no momento. Os eventos extras observados pelo devtools também podem tornar as coisas um pouco mais robustas, caso seja necessário arrastar ou mais manipulação de mudança de foco.