firefox-devtools / firefox-devtools/profiler

Clicking on the network track should take you to the correct row in the network chart

Open
#1,525 2 comments 0 reactions 0 assignees View on GitHub
help wanted network panel polish
Dominant language
TypeScript
Stars
1.5k
Forks
491
Avg merge
3d 5h
Merged PRs (30d)
30

Description

As a user looking at a profile, I would like to click in the network track, and jump down to the network activity happening at that time. There is a lot network activity overlapping, but it would be handy to center the network panel at the event that started at the mouse click.

Watch [around ~3:15 on this video](https://onlinexperiences.com/scripts/Server.nxp?LASCmd=AI:1;F:SF!42000&EventKey=309918&RandomValue=1543262835855) to see the expectation.

To implement this, you would need to convert the click event inside the NetworkTrack component into profile time, then create a mechanism in the NetworkChart to highlight a row. In fact, this would be better and maybe should be a prerequisite to have a selected network marker in the network chart.

┆Issue is synchronized with this [Jira Task](https://mozilla-hub.atlassian.net/browse/FP-92)

Contributor guide

Open the contributing guide

Research direction

Start by reading the NetworkTrack and NetworkChart components, then watch the linked video around 3:15 to understand the expected interaction. Trace how a track click can be represented in profile time and how the chart currently identifies network activity. Done means clicking a network-track event highlights and centers the corresponding network-chart row.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.