1581790 - Network left side bar should have a toggle button

Status: VERIFIED FIXED

(DevTools :: Netmonitor, defect, P3)

Description

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

We introduced a new left aligned side bar in the Network panel in bug 1580530

This side bar is already used for:

• Search
• Request Blocking

It should have a toggle button just like the Network details (right aligned) bar has.
Consequently we can remove the close button from the Search panel

---

Some pointers:

1. Toggle button for the Details panel is specified here:
   https://searchfox.org/mozilla-central/rev/7ed8e2d3d1d7a1464ba42763a33fd2e60efcaedc/devtools/client/netmonitor/src/components/TabboxPanel.js#115-122

We need to do similar thing for NetworkActionBar component (introduced in bug 1580530)

2. The state of the NetworkActionBar should be stored in ui reducer - along side the flag for the Details panel
   https://searchfox.org/mozilla-central/rev/7ed8e2d3d1d7a1464ba42763a33fd2e60efcaedc/devtools/client/netmonitor/src/reducers/ui.js#75

3. We also need an action toggleActionBar and openActionBar implemented along side the existing toggleNetworkDetails.
   toggleNetworkDetails

https://searchfox.org/mozilla-central/rev/7ed8e2d3d1d7a1464ba42763a33fd2e60efcaedc/devtools/client/netmonitor/src/actions/ui.js#166

4. The alignment of the toggle button should be on the right side (not on the left, like in the Details panel)

This requires a new flag passed in the sidebarToggleButton object:
https://searchfox.org/mozilla-central/rev/7ed8e2d3d1d7a1464ba42763a33fd2e60efcaedc/devtools/client/netmonitor/src/components/TabboxPanel.js#115-122

Could be e.g.: alignRight set to false by default.

The position can be easily changed by changing the order in which components are rendered here

https://searchfox.org/mozilla-central/rev/7ed8e2d3d1d7a1464ba42763a33fd2e60efcaedc/devtools/client/shared/components/tabs/Tabs.js#336-340

The All Tabs Menu will probably overlap the button, so we need to either move it to the left or change right-padding of the toggle buttong

Here is an example of how to change the order of components

      return dom.nav(
        { className: "tabs-navigation" },
        sidebarToggle,
        dom.ul({ className: "tabs-menu", role: "tablist" }, tabs),
        allTabsMenu,
      );

5. The icon of the toggle button should be transformed to point the other direction. We can use CSS

.network-monitor .sidebar-toggle.alignRight {
   transform: scaleX(-1);
}

6. Must be tested in both RTL/LTR modes
   use intl.uidirection pref to switch between those modes.

Honza

Comment 1

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

Harald, what do you think about the button? We are currently opening/closing Search and Blocking side panels from the Toolbar so, there is a way for the user to go there. But, having the button would be consistent with the Details side bar (on the right side of the Network panel).
What do you think?

Honza

Comment 2

[:Harald Kirschner :digitarald]

Makes sense to follow the same tab/toggle button that the right panel has as it doesn't take much space and is consistent.

Comment 3

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

I am marking this as good-first-bug but, it might rather be good-second-bug.

Honza

Comment 4

[Pranav pandey]

hi can I work on this issue

Comment 5

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

Assigned to you, thanks for the help.
Honza

Comment 6

[Pranav pandey]

Hi honza right now the logic of opening and closing the action bar is handled mainly in search actions and its state is also stored and handled via search reducer https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/reducers/search.js#35 do you want me to remove that logic as you mention to manage its state via UI reduces. I think removing it would be a good idea as toggleRequestBlockingPanel is dispatching OPEN_SEARCH and then changing action bar tab to panel blocking is kind of confusing .https://searchfox.org/mozilla-central/source/devtools/client/netmonitor/src/actions/request-blocking.js#22

Pranav

Comment 7

[Pranav pandey]

Attachment: Bug 1581790 - added toggle button to network details.

Comment 8

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/d20ce0c23b7b
 - added toggle button to network details. r=Honza

Comment 9

[Bogdan Tara[:bogdan_tara | bogdant]]

https://hg.mozilla.org/mozilla-central/rev/d20ce0c23b7b

Comment 10

[Cristian Fogel [:cfogel]]

Verified with 75.0a1 (2020-02-24) on Windows 10, macOS 10.13, Kubuntu19.