User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36

Steps to reproduce:

1. Go to this test page and open Netmonitor.
2. Make a WS connection, click on the WS request in Netmonitor, send a WS frame and click on the frame in the Messages panel.
3. The Raw Data Accordion is observed.
4. Refresh Netmonitor e.g. using Cmd + R.
5. Make a new WS connection and click on the WS request in Netmonitor.

Actual results:

The Raw Data Accordion is still observed.

Expected results:

Raw Data Accordion should not be shown.

This is because when Netmonitor is refreshed, the WebSocketsPanel is unmounted. At this point, if the Raw Data Accordion is shown, it means that state.webSockets.frameDetailsOpen is true.

There are two approaches we can take:

1. Implement a componentDidMount() lifecycle to check for visible frame and call openFrameDetailsTab(false) if the visible frame is not found.
2. During the componentWillUnmount() lifecycle, call openFrameDetailsTab(false) to reset state.webSockets.frameDetailsOpen to false.

Approach 2 is cleaner as it does not require the isSelectedFrameVisible selector call as compared to approach 1.

Set frameDetailsOpen to false when WebSocketsPanel unmounts.

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