1932626 - Full path column in network devtools

Status: RESOLVED FIXED

(DevTools :: Netmonitor, enhancement, P3)

Description

[Maciej Jaros]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0

Steps to reproduce:

• Open my app.
• App calls /api/loan/list
• App calls /api/loan/archived/list

Actual results:

Both show up as "list" in the devtools (file column).

Expected results:

Should have a column in which I can distinguish such calls.

Other typical REST calls could include:
/api/reader/138?_dc=1732196947775
In which case it should be distinguishable from:
/api/holdings/138?_dc=1732196947775

So full path would for most REST apps I think. Or maybe even a relative url (everything that comes after the domain).

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Fenix::General' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Noah Bond [:007]]

Moving this back to Desktop

Comment 3

[Dana Lucaci, Desktop QA]

Thank you for the enhancement suggestion.
Setting as NEW so the developing team can have a look.

Comment 4

[Francesco Lodolo [:flod]]

Not completely sure if this is about NetMonitor.

Comment 5

[Julian Descottes [:jdescottes]]

Thanks for the suggestion! This would make sense, probably not too complicated to add. I can mentor this in case someone is interested.

Chrome has such a column.

Comment 6

[Abdelaziz Mokhnache]

Hi there, I would like to work on this ticket

Comment 7

[Julian Descottes [:jdescottes]]

Thanks I will assign the bug to you.! Note that this is not flagged as a good first bug, so while it shouldn't be too challenging it's not a trivial change either. But if you're ready to dive into the Firefox codebase, it should be fine.

For starters, take a look at our getting started documentation at https://firefox-source-docs.mozilla.org/setup/index.html
It should have everything you need to setup your development environment.

Specifically the code for the network monitor can be found under devtools/client/netmonitor/src. The panel is built with React, and you will find many components related to the various columns we have in the components/request-list folder.

I think a good way to get started would also be to look at a patch which added another column, here the priority column. You can expect part of the work to be similar.

• Initiator column https://phabricator.services.mozilla.com/D61423
• Priority column https://phabricator.services.mozilla.com/D144524

That should be enough to get you started, so please take a look and ping me if you have any question!

Comment 8

[Abdelaziz Mokhnache]

Thanks for assigning me this bug. I am aware that it is not flagged as good first bug. However, I would like to dive into the codebase and do whatever necessary to accomplish it. I've used Firefox as my primary browser for years and I am willing to start contributing and pay back some of the debt we owe the great team behind it. I've already setup Firefox development environment few weeks ago and started reading devtools source code and somewhat undertood the overall folder structure and components architecture. I really appreciate the link of patches you gave me. I will carefully read them and get started on it and will let you know if I need further assistance.

Comment 9

[Julian Descottes [:jdescottes]]

(In reply to Abdelaziz Mokhnache from comment #8)

Thanks for assigning me this bug. I am aware that it is not flagged as good first bug. However, I would like to dive into the codebase and do whatever necessary to accomplish it. I've used Firefox as my primary browser for years and I am willing to start contributing and pay back some of the debt we owe the great team behind it. I've already setup Firefox development environment few weeks ago and started reading devtools source code and somewhat undertood the overall folder structure and components architecture. I really appreciate the link of patches you gave me. I will carefully read them and get started on it and will let you know if I need further assistance.

That's great to hear! Don't hesitate to join our channel on Matrix if you want to ask questions directly to the team as well :) https://chat.mozilla.org/#/room/#devtools:mozilla.org

Comment 10

[Abdelaziz Mokhnache]

Hey there, I made some advancement in this ticket, and would like to ask about two things:

1. Do we need to show the slow request icon (turtle icon) in this column like in File column or not?
2. When hovering over this column what should be shown, the original url (like in File column) or the column content (full path)?

Any feedback is appreciated, Thanks

Comment 11

[Abdelaziz Mokhnache]

Hey there, I made some advancement in this ticket, and would like to ask about two things:

1. Do we need to show the slow request icon (turtle icon) in this column like in File column or not?
2. When hovering over this column what should be shown, the original url (like in File column) or the column content (full path)?

Any feedback is appreciated, Thanks

Comment 12

[Julian Descottes [:jdescottes]]

(In reply to Abdelaziz Mokhnache from comment #11)

Hey there, I made some advancement in this ticket, and would like to ask about two things:

1. Do we need to show the slow request icon (turtle icon) in this column like in File column or not?

No need to show the slow request icon here, we can keep it only in the File column.

2. When hovering over this column what should be shown, the original url (like in File column) or the column content (full path)?

For consistency, let's show the URL.

Comment 13

[Abdelaziz Mokhnache]

Attachment: Bug 1932626 - Add a column displaying the full path of the request url r=jdescottes

Comment 14

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/37da133f85ed
Add a column displaying the full path of the request url r=jdescottes,devtools-reviewers

Comment 15

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/37da133f85ed

Comment 16

[Sebastian Zartner [:sebo]]

This change is worth to be mentioned in the developer release notes for Firefox 138 and possibly also in the general release notes.

Release Note Request (optional, but appreciated)
[Why is this notable]: Makes it easier for developers to see the full path of a network request.
[Affects Firefox for Android]: no
[Suggested wording]: A new column was added to the Network panel showing the full path of the request URL.
[Links (documentation, blog post, etc)]: n/a

Sebastian

Comment 17

[Dianna Smith [:diannaS]]

Added to 138 release notes https://www.mozilla.org/en-US/firefox/138.0beta/releasenotes/