予想:DOMの強調表示がなくなります。
実際:DOMの強調表示が動かなくなってしまいます。
これをトリガーする簡単な方法:
DevToolsで他の何かに焦点を合わせるまで、ハイライトは「固執」します。
TBHこれは、ネイティブ要素がホバーまたはフォーカスされている限り、ブラウザーの要素パネルの動作と一致するため、私の考えでは予想される動作です。 1
必要に応じて、 Tree
更新することで、数秒後に自動非表示を有効にすることができます...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/Tree.js#L207 -L223
... SelectedElement
ようにhideAfterTimeout: true
も渡す...
https://github.com/facebook/react/blob/95bd7aad7daa80c381faa3215c80b0906ab5ead5/packages/react-devtools-shared/src/devtools/views/Components/SelectedElement.js#L75 -L89
1 2つの小さな、しかしおそらく重要な違いの
強調表示がFirefoxでスタックしないため、FirefoxとChromeの間の動作が予期される動作であるかどうかに一貫性がありません。
2つの小さな、しかしおそらく重要な違いの1つは、ネイティブ要素パネルがマウスの「スタック」ハイライトを残していないように見えることです。
私が理解しているかどうかはわかりません—これはまさに私が問題を提起したものです。 :-)そうです、それは重要な違いだと思います。 私は毎日この問題にぶつかっています。
... hideAfterTimeoutも渡す:SelectedElementのようにtrue ...
それは、数秒後に常にハイライトを削除するように聞こえます。 したがって、この問題は解決されますが、他のケースを悪化させることによって。 それは私には受け入れられる解決策のようには思えません。
理想的には、カーソルをDevToolsの外に置いた瞬間に、強調表示を確実に削除することだけが必要です。 ネイティブのものと同じように。
「キーボードを使い続けるとどうなるか」などのエッジケースがあることは理解していますが、いつもヒットしているわけではありません。 対照的に、私は毎日何度もこの特定のバグ(マウスアウトの強調表示を一貫してリセットしない)にぶつかっています。
私はここで30分過ごしましたが、なぜイベントが発生しないのかについての遠い考えすらありません。 ツイッターで聞いてみましょう。 https://twitter.com/dan_abramov/status/1222178476817633282
これについてはTwitterで言及し
devtoolsがホバー状態を更新する主な場所は_onmousemoveハンドラーにあるようです。 この関数は、興味深いことに、他のイベントハンドラーによって参照されない_highlightTreeElementを呼び出します。
他のいくつかのメソッド( _onfocusout
、 _onmouseleave
、 _ondragstart
、および_reset
)はSDK.OverlayModel.hideDOMNodeHighlight()
を呼び出します。これは、名前が示すように、メインページからハイライトします。
編集: itemDataの現在の実装はonMouseMove
とonMouseLeave
にバインドされているように見えるため、イベントハンドラーのさまざまなセットを呼び出したいと言ったことを忘れました。 devtoolsが監視する追加のイベントは、ドラッグやフォーカス変更の処理が気になる場合に、物事を少し堅牢にする可能性もあります。
最も参考になるコメント
これについてはTwitterで言及し
devtoolsがホバー状態を更新する主な場所は_onmousemoveハンドラーにあるようです。 この関数は、興味深いことに、他のイベントハンドラーによって参照されない_highlightTreeElementを呼び出します。
他のいくつかのメソッド(
_onfocusout
、_onmouseleave
、_ondragstart
、および_reset
)はSDK.OverlayModel.hideDOMNodeHighlight()
を呼び出します。これは、名前が示すように、メインページからハイライトします。編集: itemDataの現在の実装は
onMouseMove
とonMouseLeave
にバインドされているように見えるため、イベントハンドラーのさまざまなセットを呼び出したいと言ったことを忘れました。 devtoolsが監視する追加のイベントは、ドラッグやフォーカス変更の処理が気になる場合に、物事を少し堅牢にする可能性もあります。