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

Status: RESOLVED FIXED

(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.

Comment 16

[Phil [:phigl]]

Hi,
I have already created a context menu locally using Honza's suggestions and played around. If it's okay with you, I would like to work on this bug. However, the requirements are not 100% clear to me yet. For example, it says "a. Refresh/Reload -- to refresh the file or the whole selected category". I can only see files/requests in the TreeView result of the SearchPanel. What is meant by "whole selected category" here?
Thanks in advance,
Phil

Comment 17

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Phil [:phigl] from comment #16)

Hi,
I have already created a context menu locally using Honza's suggestions and played around. If it's okay with you, I would like to work on this bug.

Hello Phil, great to see you already have something working locally :) The bug is now assigned to you

However, the requirements are not 100% clear to me yet. For example, it says "a. Refresh/Reload -- to refresh the file or the whole selected category". I can only see files/requests in the TreeView result of the SearchPanel. What is meant by "whole selected category" here?

I'm not sure what Cristian meant with that, but we can ask him :)
Until we get an answer, you can try to work on a specific item (for example "Copy"), and push the patch to phabricator to get early feedback

Comment 18

[Phil [:phigl]]

Attachment: Bug 1701557 - introduced context menu for results in SearchPanel.

Comment 19

[Phil [:phigl]]

Attachment: WIP: Bug 1701557 - corrected context menu issues

The following issues have been corrected:

• removed delay for onClick-handler
• moved openRequestInTab function to a common place.
• blocked-URL filtering is now done in the RequestListContextMenu#open
• DisplayedRequests will not be used anymore in the SearchPanel to open the ContextMenu

Comment 20

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

Redirect a needinfo that is pending on an inactive user to the triage owner.
:Honza, since the bug has recent activity, could you have a look please?

For more information, please visit BugBot documentation.

Comment 21

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

Removing NI

Cristian, if you are around, there is a question for you in comment #17

Comment 22

[BugBot (nomail) [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.

Comment 23

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/423234d9641f
introduced context menu for results in SearchPanel. r=devtools-reviewers,ochameau

Comment 24

[Serban Stanca [:SerbanS]]

https://hg.mozilla.org/mozilla-central/rev/423234d9641f