[Network Tab] Rework UI/UX on filters and buttons

[TiffApps]

Hi, I wanted to point out a few things that I found annoying:

1 - The filter tab is very useful, but gets reset when the network tab is closed, making it annoying to rewrite filters every time I open it. For example, I get spammed by websocket requests and have to filter them with -s:101 every time I open this tab. I suggest the filters should be persistent (like the filters in VSC's Debug Console), saved as a preference.

2 - The "Clear" button doesn't clear only the request logs, but also the filters, which is definitely not what I want when I click there (there is a "Reset to default" button and another "Clear" button to clear filters in the filter tab, and that should be enough). This "Clear" button should clear only the recorded request traffic and nothing else.

3 - This last one is more a remark, but I can see two buttons with the same icon? Left one is to pause traffic, and right one is to resume it, so I guess the right one should be a "Play" icon. Or remove one of them and make the remaining one a toggle between Play/Pause.

Let me know what you think about these! And huge thanks for fixing the errors lately on this network tool, it's so practical, I love it!

[kenzieschmoll]

All three of these suggestions sounds great.

[kenzieschmoll]

For suggestion 1, we may need more design consideration around this. We definitely wouldn't want to store text filters in preferences. Maybe we could have a checkbox filter (see the CPU profiler page for example) "Show websocket traffic" and something like that we could store to preferences.

We can start with implementing 2 & 3 though. @CoderDake

[jagrutatwork]

Hello @kenzieschmoll ? Can i work on this issue?

[kenzieschmoll]

Hi @jagrutatwork. Yes, feel free to work on items 2 & 3 above. For 3, please take a look at the PauseResumeButtonGroup widget in DevTools - we can use that here too.

[jagrutatwork]

Thanks @kenzieschmoll, I will take a look into it!