React: خطأ: يتعطل تمييز DevTools DOM بعد مرور طويل

طريقة أسهل لتشغيل هذا:

1. انقر لتحديد عنصر في شجرة المكونات
2. حرك الماوس خارج DevTools
3. انقر فوق السهم لأعلى أو لأسفل

سيتم الآن "تثبيت" التمييز حتى تركز على شيء آخر في DevTools.

TBH هذا هو السلوك المتوقع في ذهني ، لأنه يطابق ما تفعله لوحة Elements في المتصفح طالما أن العنصر الأصلي إما يتم تحريكه أو تركيزه. ¹

إذا أردنا ذلك ، يمكننا تمكين الإخفاء التلقائي بعد بضع ثوانٍ عن طريق تحديث Tree ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223

... لتمرير hideAfterTimeout: true مثل SelectedElement ...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89

¹ هناك اختلاف صغير ولكن ربما يكون مهمًا بين الاثنين وهو أن لوحة العناصر الأصلية لا يبدو أنها تترك تمييز "عالق" عند إخراج الماوس. ربما يكون الكشف عن الماوس أكثر موثوقية وترك حدود أدوات المطور بالكامل؟ ربما يمكننا فعل ذلك بشكل أفضل بطريقة ما؟

سواء كان السلوك المتوقع أم لا ، السلوك بين Firefox و Chrome غير متسق نظرًا لأن التمييز لا يتوقف على Firefox.

أحد الاختلافات الصغيرة ولكن المهمة بين الاثنين هو أن لوحة العناصر الأصلية لا يبدو أنها تترك تمييز "عالق" عند إخراج الماوس.

لست متأكدًا من فهمي - هذا هو بالضبط ما رفعت القضية بشأنه. :-) لذا نعم ، أعتقد أنه فرق مهم. أنا أعالج هذه المشكلة كل يوم.

... لتمرير hideAfterTimeout أيضًا: صحيح مثل SelectedElement ...

يبدو أنه سيزيل التظليل دائمًا بعد بضع ثوانٍ. لذلك من شأنه أن يحل هذه المشكلة ، ولكن بجعل الحالة الأخرى أسوأ. لا يبدو هذا كحل مقبول بالنسبة لي.

من الناحية المثالية ، كل ما أريده هو أن تتم إزالة التظليل بشكل موثوق به في اللحظة التي أضع فيها مؤشري خارج DevTools . تمامًا كما يفعل الشخص الأصلي.

أتفهم أن هناك حالات متطرفة مثل "ماذا لو واصلت استخدام لوحة المفاتيح" ولكني لا أستخدمها طوال الوقت. على النقيض من ذلك، وأنا ضرب هذا الخطأ معين (غير متسق تسليط الضوء على إعادة تعيين على mouseout) كل يوم عدة مرات.

لقد أمضيت نصف ساعة هنا وليس لدي حتى فكرة عن بعد لماذا لا ينطلق الحدث. دعنا نسأل تويتر. https://twitter.com/dan_abramov/status/1222178476817633282

لقد ذكرت هذا على Twitter ، لكنني بحثت في مصدر devtools لمعرفة كيفية تعاملهم مع حركة الماوس وإبراز عناصر DOM.

يبدو أن devtools في المكان الرئيسي يقوم بتحديث حالة التمرير في معالج _onmousemove . تستدعي هذه الوظيفة بدورها _highlightTreeElement والتي ، بشكل مثير للاهتمام ، لا تتم الإشارة إليها بواسطة أي معالج حدث آخر.

بعض الطرق الأخرى ( _onfocusout ، _onmouseleave ، _ondragstart ، و _reset ) استدعاء SDK.OverlayModel.hideDOMNodeHighlight() والتي ، كما يوحي الاسم ، تزيل تسليط الضوء من الصفحة الرئيسية.

تحرير: نسيت أن أذكر أنني أردت استدعاء مجموعة مختلفة من معالجات الأحداث حيث يبدو أن التنفيذ الحالي لـ itemData يرتبط بـ onMouseMove و onMouseLeave في الوقت الحالي. قد تجعل الأحداث الإضافية التي يلاحظها devtools الأشياء أكثر قوة قليلاً إذا كان السحب أو معالجة تغيير التركيز أكثر مصدر قلق بالنسبة لك.