React: Bug: Penyorotan DOM DevTools macet setelah hover yang lama

Cara yang lebih mudah untuk memicu ini:

1. Klik untuk memilih elemen di pohon Komponen
2. Gerakkan mouse Anda ke luar DevTools
3. Klik panah atas atau bawah

Sorotan sekarang akan "melekat" sampai Anda fokus pada hal lain di DevTools.

TBH ini adalah perilaku yang diharapkan dalam pikiran saya, karena cocok dengan apa yang dilakukan panel Elemen browser selama elemen asli di-hover atau difokuskan. ¹

Jika mau, kami dapat mengaktifkan penyembunyian otomatis setelah beberapa detik dengan memperbarui Tree ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... untuk juga memberikan hideAfterTimeout: true seperti SelectedElement tidak ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ Satu perbedaan kecil tapi mungkin penting antara keduanya adalah bahwa panel elemen asli tampaknya tidak meninggalkan sorotan "macet" pada mouse. Mungkin itu lebih andal mendeteksi mouse yang meninggalkan batasan alat pengembang? Mungkin kita bisa melakukannya dengan lebih baik?

Apakah perilaku yang diharapkan atau tidak, perilaku antara Firefox dan Chrome tidak konsisten karena penyorotan tidak macet di Firefox.

Satu perbedaan kecil tapi mungkin penting antara keduanya adalah bahwa panel elemen asli tampaknya tidak meninggalkan sorotan "macet" pada mouse.

Saya tidak yakin saya mengerti - inilah yang sebenarnya saya ajukan. :-) Jadi ya, menurut saya ini adalah perbedaan yang penting. Saya membahas masalah ini setiap hari.

... untuk juga meneruskan hideAfterTimeout: true seperti yang dilakukan SelectedElement ...

Kedengarannya seperti itu akan selalu menghapus sorotan setelah beberapa detik. Jadi itu akan menyelesaikan masalah ini, tetapi dengan memperburuk kasus lain. Sepertinya itu bukan solusi yang bisa saya terima.

Idealnya, yang saya inginkan adalah agar penyorotan dihapus secara andal saat saya meletakkan kursor di luar DevTools . Sama seperti yang asli lakukan.

Saya memahami ada kasus tepi seperti "bagaimana jika saya tetap menggunakan keyboard" tetapi saya tidak menekannya sepanjang waktu. Sebaliknya, saya memukul bug tertentu (tidak konsisten ulang penyorotan pada mouseout) setiap hari berkali-kali.

Saya menghabiskan setengah jam di sini dan saya bahkan tidak tahu sedikit pun mengapa acara itu tidak menyala. Ayo tanya twitter. https://twitter.com/dan_abramov/status/1222178476817633282

Saya menyebutkan ini di Twitter , tetapi saya menggali sumber devtools untuk mencari tahu bagaimana mereka menangani gerakan mouse & menyorot elemen DOM.

Sepertinya tempat utama devtools memperbarui status hover ada di penangan _onmousemove mereka. Fungsi ini pada gilirannya memanggil _highlightTreeElement yang, yang menarik, tidak direferensikan oleh pengendali kejadian lainnya.

Beberapa metode lain ( _onfocusout , _onmouseleave , _ondragstart , dan _reset ) memanggil SDK.OverlayModel.hideDOMNodeHighlight() yang, seperti namanya, menghapus sorot dari halaman utama.

EDIT: Lupa menyebutkan bahwa saya ingin memanggil set penangan acara yang berbeda karena implementasi itemData saat ini tampaknya mengikat ke onMouseMove dan onMouseLeave saat ini. Peristiwa tambahan yang diamati oleh devtools juga dapat membuat segalanya menjadi sedikit lebih kuat jika Anda harus menyeret atau lebih banyak menangani perubahan fokus.