Closed Bug 1580530 Opened 1 year ago Closed 5 months ago

Support for multiple panels in left side bar

Categories

(DevTools :: Netmonitor, enhancement, P3)

All
Unspecified
enhancement

Tracking

(firefox71 verified)

VERIFIED FIXED
Firefox 71
Tracking Status
firefox71 --- verified

People

(Reporter: Honza, Assigned: davidwalsh)

References

(Blocks 2 open bugs)

Details

(Whiteboard: [debugger-mvp])

Attachments

(1 file)

The UI for blocking specific resources manually from DevTools Network panel will be part of the left side bar (not the right side bar for HTTP request details)

This left side bar already exists and is used for Search across all HTTP requests (resources).

This bug is about:

  • Implementing support for multiple side panels in the left side bar (using tab bar)
  • Convert the current Search panel into a tab in the side bar

Honza

Some pointers to the code base:

  1. The Search panel is rendered here
    https://searchfox.org/mozilla-central/rev/a777ff11b6d700a698c61e5bd17e73b044304494/devtools/client/netmonitor/src/components/MonitorPanel.js#180

In this place we need to render the new side bar NetworkActionBar not just one panel.

The SearchPanel is implemented here:
https://searchfox.org/mozilla-central/rev/a777ff11b6d700a698c61e5bd17e73b044304494/devtools/client/netmonitor/src/components/search/SearchPanel.js#37

  1. The existing right side bar is represented by NetworkDetailsPanel (should be renamed to NetworkDetailsBar in another bug) and rendered here:
    https://searchfox.org/mozilla-central/rev/a777ff11b6d700a698c61e5bd17e73b044304494/devtools/client/netmonitor/src/components/MonitorPanel.js#226

... and implemented here:
https://searchfox.org/mozilla-central/rev/a777ff11b6d700a698c61e5bd17e73b044304494/devtools/client/netmonitor/src/components/NetworkDetailsPanel.js#29

  1. The new NetworkActionBar should be implemented exactly the same way as NetworkDetailsPanel. Based on Tabbar
    require("devtools/client/shared/components/tabs/TabBar")

NetworkDetailsPanel is using helper TabboxPanel, but it looks like it isn't needed for NetworkActionBar. Let's try to simplify it here.

  1. Here is an example of adding a new panel into the TabBar
    https://searchfox.org/mozilla-central/rev/a777ff11b6d700a698c61e5bd17e73b044304494/devtools/client/netmonitor/src/components/TabboxPanel.js#124-137

We need to append the existing SearchPanel.

Honza

Summary: Implement new side panel for blocking specific resources → Support for multiple panels in left side bar

Creates a left sidebar panel for both search and request blocking.

Duplicate of this bug: 1580541
Pushed by dwalsh@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/d9b4b368aa2e
Implement NetworkActionBar in the netmonitor r=Honza
Status: NEW → RESOLVED
Closed: 5 months ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 71
Assignee: nobody → dwalsh
Blocks: dbg-71
Whiteboard: [debugger-mvp]

Marking as verified for 71.0b9.

Status: RESOLVED → VERIFIED
Hardware: Unspecified → All
You need to log in before you can comment on or make changes to this bug.