Suggestion: keyboard arrow-key navigation for the flamegraph view
justingrant opened this issue · 1 comments
It would be good to have keyboard navigation on the flamegraph view to make it easier and faster to scoot around to different components in the same render.
Given that flamegraph is implemented in SVG and given the complexity of navigating through an uneven grid, I suspect keyboard access is probably beyond the scope of near-future DevTools releases, but wanted to file this issue while it's top-of-mind.
Expected behavior:
- There should be a selected/focused UI of some sort around the active component. This could be a black or colored outline around the currently selected component, or perhaps a background pattern like diagonal hatching. IMHO, this would be valuable even without keyboard support!
- Up arrow should change selection to the parent component
- Left/Right arrows should move selection to the prev/next sibling components. Should wrap when at the beginning or end of the line.
- Tab should move focus to the right pane (this matches behavior of other DevTools tabs like Elements)
- Shift+Tab should move focus to the rightmost control in the toolbar (currently this is the "next commit" button)
This is a companion issue to #332 which asks for keyboard access for the "Rendered At" list. Compared to this suggestion, #332 should be much easier to implement so I split them.
This repository is being merged into the main React repo (github.com/facebook/react). As part of this, I am moving all issues to that repository as well and closing them here.
This issue has been relocated to:
facebook/react#16472