1701557 - DevTools Netmonitor - Search tab - add context menu with Refresh/Reload, Block/Unblock, Copy options

Status: NEW

(DevTools :: Netmonitor, enhancement, P3)

Description

[Cristian Fogel [:cfogel]]

Attachment: nosearch.png

Affected versions

• 88.0a1

Affected platforms

• all

Steps to reproduce

1. Launch Firefox, enable DevTools / Network tab;
2. Access any webpage;
3. Click to enable the Search/Blocking tab;
4. Inside the search tab search for any keyword (example css);
5. Right click on any listed element from the Search section;

Enhancement suggestion

• right click on any list element from the search section could open a dropdown menu with some key options:
  a. Refresh/Reload -- to refresh the file or the whole selected category
  b. Block/Unblock -- this would be the biggest one, so that the user would not have to click on the desired css file then block it from the list on the right;
  c. Copy -- user might want to copy and paste in another file for debugging or other purposes;

Actual result

• nothing happens;

Additional notes

• set as S4, due to the reduced number of users that would benefit from this;
• attached screenshot with the section to best illustrate the suggestion.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thank you Cristian, I like the idea

Honza

Comment 2

[Jan Honza Odvarko [:Honza] (always need-info? me)]

This could be good first bug

1. The search panel is rendered by this React component
   https://searchfox.org/mozilla-central/rev/9043e515e9608cc55b252a40cb2dfb6f767bcffd/devtools/client/netmonitor/src/components/search/SearchPanel.js#47

2. The panel is using generic TreeView component to render its content
   https://searchfox.org/mozilla-central/rev/9043e515e9608cc55b252a40cb2dfb6f767bcffd/devtools/client/shared/components/tree/TreeView.js#90

Here is renderTree method
https://searchfox.org/mozilla-central/rev/9043e515e9608cc55b252a40cb2dfb6f767bcffd/devtools/client/netmonitor/src/components/search/SearchPanel.js#123-133

3. The TreeView component defines onContextMenuRow property
   https://searchfox.org/mozilla-central/rev/9043e515e9608cc55b252a40cb2dfb6f767bcffd/devtools/client/shared/components/tree/TreeView.js#142

A callback can be passed to the prop. The callback should be responsible for showing the context menu

4. Here is an example of how to show the context menu
   https://searchfox.org/mozilla-central/rev/9043e515e9608cc55b252a40cb2dfb6f767bcffd/devtools/client/netmonitor/src/components/request-details/PropertiesView.js#151-171

Note the const { object } = member;
This object contains detailed info about the search item
It's the object provided by SearchProvider here:
https://searchfox.org/mozilla-central/rev/9043e515e9608cc55b252a40cb2dfb6f767bcffd/devtools/client/netmonitor/src/components/search/search-provider.js#21-30

The object should be used to get the URL etc.

Honza

Comment 3

[Morgan collado]

Hello! I would like to take this bug and work on it. Can you please assign it to me? Thank you!

Comment 4

[Hubert Boma Manilla (:bomsy)]

Great!
I've assigned to you.

Thanks!

Comment 5

[Morgan collado]

Greetings,

I worked on this a little but I realized that I have other projects that I need to prioritize. I'm going to put this down so that someone else can work on it.

Thank you!
Morgan

Comment 6

[Hubert Boma Manilla (:bomsy)]

No problem! Thanks for letting us know!

Comment 7

[Vaidehi]

Hi! This is Vaidehi, an outreachy applicant. Looking for my first bug. Would love to work on this with your assistance.
Thanks.

Comment 8

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thank you for helping with this, assigned to you.

You might want to read the docs first
https://firefox-source-docs.mozilla.org/devtools/

Honza

Comment 9

[Vaidehi]

(In reply to Jan Honza Odvarko [:Honza] (always need-info? me) from comment #8)

Thank you for helping with this, assigned to you.

You might want to read the docs first
https://firefox-source-docs.mozilla.org/devtools/

Honza

Thank you Honza. Have started working on it.

Comment 10

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

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.

Comment 11

[Leslie]

Hi Honza, I'm an outreachy applicant and would like to work on this bug. Can I be assigned to it?

Comment 12

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Assigned to you, thank you for helping.

Honza

Comment 13

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Cristian, just to make sure we understand the requirements here:

a. Refresh/Reload -- to refresh the file or the whole selected category
This means refreshing the list of search results coming from clicked file, correct?

b. Block/Unblock -- this would be the biggest one, so that the user would not have to click on the desired css file then block it from the list on the right;

This is related to "Block URL" feature that is available in the Request list context menu, correct?

c. Copy -- user might want to copy and paste in another file for debugging or other purposes;

What exactly should be copied in the clipboard here?

Honza

Comment 14

[Cristian Fogel [:cfogel]]

For points [a, b] : yes, it was related to the Block URL feature.
At the time of filing the enhancement, it seemed that it would help to block domain requests or related to something a user might search in this section.

For point [c] : the idea would have been for the whole request header block to be copied (ex, in the image the whole data nested under photoswipe.css to be copied to clipboard if there would be such an option).

Comment 15

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

This good-first-bug hasn't had any activity for 2 months, it is automatically unassigned.
For more information, please visit auto_nag documentation.