React: बग: लंबे समय तक मंडराने के बाद DevTools DOM हाइलाइटिंग अटक जाती है

इसे ट्रिगर करने का एक आसान तरीका:

1. घटक ट्री में एक तत्व का चयन करने के लिए क्लिक करें
2. अपने माउस को DevTools के बाहर ले जाएं
3. ऊपर या नीचे तीर पर क्लिक करें

जब तक आप DevTools में किसी और चीज़ पर ध्यान केंद्रित नहीं करते तब तक हाइलाइट "स्टिक" रहेगा।

टीबीएच यह मेरे मन में अपेक्षित व्यवहार है, क्योंकि यह मेल खाता है कि ब्राउज़र का एलिमेंट पैनल क्या करता है जब तक कि कोई मूल तत्व या तो मंडराया या केंद्रित नहीं होता है। ¹

यदि हम चाहते थे, तो हम Tree अपडेट करके कुछ सेकंड के बाद ऑटो-हाइडिंग को सक्षम कर सकते थे ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-seden/derc/devtools/views/Compenders/Tree.js#L207 -L223223

... पास करने के लिए hideAfterTimeout: true जैसे SelectedElement करता है ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-seden/derc/devtools/views/Compords/SelectedElement.js#L7575-8989

¹ एक छोटा लेकिन शायद दोनों के बीच महत्वपूर्ण अंतर यह है कि मूल तत्व पैनल माउस से "अटक" हाइलाइट को छोड़ने के लिए प्रतीत नहीं होता है। हो सकता है कि यह अधिक मज़बूती से माउस का पता लगाने के लिए पूरे डेवलपर टूल को छोड़ दे? शायद हम किसी भी तरह बेहतर कर सकते हैं?

इसके अपेक्षित व्यवहार या नहीं फ़ायरफ़ॉक्स और क्रोम के बीच व्यवहार असंगत है क्योंकि हाइलाइटिंग फ़ायरफ़ॉक्स पर अटक नहीं जाती है।

दोनों के बीच एक छोटा लेकिन शायद महत्वपूर्ण अंतर यह है कि मूल तत्वों का पैनल माउस को "अटक" हाइलाइट को छोड़ने के लिए प्रतीत नहीं होता है।

मुझे यकीन नहीं है कि मैं समझता हूं - यह वही है जिसके बारे में मैंने मुद्दा दायर किया है। :-) तो हाँ, मुझे लगता है कि यह एक महत्वपूर्ण अंतर है। मैं हर दिन इस मुद्दे को मार रहा हूं।

... भी HideAfterTimeout पास करने के लिए: सच है जैसे SelectElement करता है ...

ऐसा लगता है कि यह हमेशा कुछ सेकंड के बाद हाइलाइटिंग को हटा देगा। तो यह इस मुद्दे को हल करेगा, लेकिन दूसरे मामले को बदतर बनाकर। यह मेरे लिए एक स्वीकार्य समाधान की तरह नहीं लगता है।

आदर्श रूप से, मैं जो चाहता हूं ,

मैं समझता हूं कि "यदि मैं कीबोर्ड का उपयोग करता रहता हूं तो" जैसे किनारे मामले हैं, लेकिन मैं उन्हें हर समय नहीं मार रहा हूं। इसके विपरीत, मैं इस विशेष बग को मार रहा हूं (असंगत रूप से माउसआउट पर हाइलाइटिंग रीसेट करें) हर दिन कई बार।

मैंने यहां आधा घंटा बिताया और मुझे इस बात का कोई रिमोट आइडिया भी नहीं है कि इवेंट में आग क्यों नहीं लगी। चलो ट्विटर पूछो। https://twitter.com/dan_abramov/status/1222178476817633282

मैंने ट्विटर पर इसका उल्लेख किया है, लेकिन मैंने यह जानने के लिए कि वे मूव मूवमेंट को कैसे हैंडल कर रहे हैं और DOM एलिमेंट्स को हाइलाइट कर रहे हैं, यह जानने के लिए devtools सोर्स के माध्यम से खुदाई की।

ऐसा लगता है कि मुख्य स्थान भक्तों का अद्यतन होवर राज्य उनके _onmousemove हैंडलर में है। यह फ़ंक्शन बदले में _highlightTreeElement को कॉल करता है, जो दिलचस्प रूप से, किसी अन्य ईवेंट हैंडलर द्वारा संदर्भित नहीं है।

कुछ अन्य विधियाँ ( _onfocusout , _onmouseleave , _ondragstart , और _reset ) SDK.OverlayModel.hideDOMNodeHighlight() बुलाती हैं, जैसा कि नाम से पता चलता है, हटाता है मुख्य पृष्ठ से हाइलाइट करें।

EDIT: उल्लेख करना भूल गया कि मैं इवेंट हैंडलर्स के अलग-अलग सेट को कॉल करना चाहता था क्योंकि आइटमटैटा का वर्तमान कार्यान्वयन onMouseMove और onMouseLeave लिए वर्तमान में बाध्य प्रतीत होता है। अतिरिक्त ईवेंट devtools अवलोकन भी चीजों को थोड़ा अधिक मजबूत बना सकते हैं जिन्हें खींचना चाहिए या अधिक फोकस परिवर्तन को संभालना आपके लिए चिंता का विषय हो सकता है।