1394217 - Network tab rendering issues

Status: RESOLVED WORKSFORME

(DevTools :: Netmonitor, defect, P3)

Description

[jiri.pospisil]

Attachment: rendering bug

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170827100428

Steps to reproduce:

1. Visit https://segment.io with a new profile
2. Open Dev tools on the Network tab
3. Refresh the page



Actual results:

The page will start to load a mind blowing number of resources from various sources. If you now try to scroll the list, it will be extremely slow and after a while some of the entries will be somewhat corrupted (see the attachment). 

The browser will also become somewhat unstable (even after closing the tab), it will no longer be possible to gracefully quit the browser (it will just hang there while taking a lot of CPU) and a system service called "opendirectoryd" will start to take CPU as well (until the browser is force quit).

macOS Sierra 10.12.6
Firefox Nightly 57.0a1 (2017-08-27) (64-bit)



Expected results:

The browser should have handled the number of requests without any issues. The rendering of the resource list should not have slowed down the rest of the browser. And of course the rendering bug should not have happened.

Comment 1

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

Thanks for the report, I can reproduce it on Win10.

Honza

Comment 2

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

The Net Panel contains a fairly large number of components so let's get started on this:

netmonitor/src/components/headers-panel.js:54: displayName: "HeadersPanel"
netmonitor/src/components/monitor-panel.js:36: displayName: "MonitorPanel"
netmonitor/src/components/properties-view.js:46: displayName: "PropertiesView"
netmonitor/src/components/request-list-column-cause.js:18: displayName: "RequestListColumnCause"
netmonitor/src/components/request-list-column-content-size.js:19: displayName: "RequestListColumnContentSize"
netmonitor/src/components/request-list-column-cookies.js:18: displayName: "RequestListColumnCookies"
netmonitor/src/components/request-list-column-domain.js:27: displayName: "RequestListColumnDomain"
netmonitor/src/components/request-list-column-duration.js:19: displayName: "RequestListColumnDuration"
netmonitor/src/components/request-list-column-end-time.js:20: displayName: "RequestListColumnEndTime"
netmonitor/src/components/request-list-column-file.js:24: displayName: "RequestListColumnFile"
netmonitor/src/components/request-list-column-latency.js:19: displayName: "RequestListColumnLatency"
netmonitor/src/components/request-list-column-method.js:18: displayName: "RequestListColumnMethod"
netmonitor/src/components/request-list-column-protocol.js:19: displayName: "RequestListColumnProtocol"
netmonitor/src/components/request-list-column-remote-ip.js:19: displayName: "RequestListColumnRemoteIP"
netmonitor/src/components/request-list-column-response-header.js:23: displayName: "RequestListColumnResponseHeader"
netmonitor/src/components/request-list-column-response-time.js:20: displayName: "RequestListColumnResponseTime"
netmonitor/src/components/request-list-column-scheme.js:18: displayName: "RequestListColumnScheme"
netmonitor/src/components/request-list-column-set-cookies.js:18: displayName: "RequestListColumnSetCookies"
netmonitor/src/components/request-list-column-start-time.js:20: displayName: "RequestListColumnStartTime"
netmonitor/src/components/request-list-column-status.js:27: displayName: "RequestListColumnStatus"
netmonitor/src/components/request-list-column-transferred-size.js:27: displayName: "RequestListColumnTransferredSize"
netmonitor/src/components/request-list-column-type.js:19: displayName: "RequestListColumnType"
netmonitor/src/components/request-list-column-waterfall.js:29: displayName: "RequestListColumnWaterfall"
netmonitor/src/components/request-list-content.js:37: displayName: "RequestListContent"
netmonitor/src/components/request-list-empty-notice.js:32: displayName: "RequestListEmptyNotice"
netmonitor/src/components/request-list-header.js:33: displayName: "RequestListHeader"
netmonitor/src/components/request-list-item.js:79: displayName: "RequestListItem"
netmonitor/src/components/response-panel.js:34: displayName: "ResponsePanel"
netmonitor/src/components/source-editor.js:23: displayName: "SourceEditor"
netmonitor/src/components/statistics-panel.js:45: displayName: "StatisticsPanel"
netmonitor/src/components/toolbar.js:48: displayName: "Toolbar"

Comment 3

[Mike Ratcliffe [:miker] [:mratcliffe] [:mikeratcliffe]]

Removing myself as I do not have time to works on this at the moment.

Comment 4

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

Jiri, we have made good progress with makin the Network panel faster. Can you recheck this bug and tell us if it's better?

Honza

Comment 5

[jiri.pospisil]

It feels snappier I think (although to be completely honest it's been a while and I don't remember exactly how it behaved back then). The rendering bug is mostly gone but I managed to reproduce it anyway for one of the entries. 

What's interesting is that the CPU usage is still very high even without opening the network panel. Just visiting the page pegs my CPU. If I close the tab, the usage drops. Open it again and it's back. I originally thought it's just some script the page includes misbehaving but it reproduces even if I completely disable JS. Do you see the same? I will try with Nightly this evening / tomorrow.

New profile each time
Firefox 58.0 (64-bit)
macOS 10.13.3

Comment 6

[jiri.pospisil]

Attachment: w30lh8xy.png

Comment 7

[jiri.pospisil]

Attachment: y9cw_yp3.png

Comment 8

[jiri.pospisil]

The same happens on Nightly 60.0a1 (2018-01-29) (64-bit) even with Webrender enabled.

Comment 9

[jiri.pospisil]

I haven't seen the rendering issues for a while. 

Jan: Please close this as resolved. I will report back if I see it again.

Comment 10

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

Thanks for the update, closing.

Honza