Svelte: Improve find references flow

[taiyab]

Design process

• Estimate: 5 days design
• Weighting factors:
  • MEDIUM risk
  • MEDIUM clarity

Discover

• Existing customer feedback - Link
  • NPS scores
  • Feedback submissions
  • Customer support requests
• Surveys - Link
• Analogous / competitive research - Link
• Internal users - Link
• External users - Link, Link

Define

• PRD and/or RFC - Link

Design

• High fidelity design using design system - Figma
• Prototype - Link
• Designer review

Testing

• Hallway testing - Link
• Usertesting.com task based evaluation - Link
• User testing with 2 customers - Link

Deliver

• Announce in #progress
• Loom - Link
• Team review
• Design team review
• QA - Link

Measure

• Metrics defined in the Figma file (i) - Link
• Followup task will analyze metrics to ensure successful completion - Link

---

Context

Find references / go to definition are some of the primary functions that allow developers to navigate around their codebases.

Navigating down a call stack commonly helps one understand code architecture and how things fit together, what the dependencies are, etc.

Being able to do this should be:

• Quick
• Intuitive
• Clear

I should be able to:

• Clearly see where I am
• Clearly see the symbol I'm interested in
• Clearly access references to that symbol
• Clearly and quickly see what those references are pointing to
• Jump to said references (peek/split/whole page)
• Clearly see the trail I’ve taken to get to where I am
• Be able to quickly and easily retrace steps to go back down the path I took
• Clearly see what options are available for me to traverse
• Clearly see how potentially accurate the results are (precise vs. search intel)

Things to consider:

• What should the default behaviour be when opening a reference? Replace main code panel, open side panel/split pane?
• Should I be able to navigate down the call stack on a split pane?
• How can we make this as fast and easy to access as possible?

Problem Themes

By exploring user feedback via NPS, we’ve picked up on a few consistent themes for improvement of code intel navigation.

Latency

• Addressed by Svelte rewrite and more

Popover problems

Using popovers on hover as a primary interaction model to discover and go to definition or references for symbols means high chance of accidentally triggering unwanted popovers when code density is so high.

Using popovers on hover as a primary interaction method also means:

• Highlighted matching identifiers become obscured by the popover
• The rest of the function/method or whatever you were reading because obscured

Spec

• Needs to deal with hundreds or even thousands of reference adeptly
• Needs to deal with references to hundreds or thousands of files

Access Points

• Click → symbols panel → Show references
• Right click → context menu → Show references
• CMD+right click → open references in-line
• Open references panel → click symbol