DevTools: Keyboard arrow-key navigation for the flamegraph view

[bvaughn]

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.

---

Originally reported by @justingrant via bvaughn/react-devtools-experimental#333

[justingrant]

Did this feature get implemented? Both linked PRs were closed not merged, but is this merged somewhere else? If so, yay! 🎉

[bvaughn]

No. I decided against landing it, as per the comments I left here: #18746 (comment)