1897765 - Network requests in background tabs where devtools is open jank the parent process main thread

Status: RESOLVED FIXED

(DevTools :: Netmonitor, defect, P2)

Description

[Florian Quèze [:florian]]

What were you doing?

Please tell us what site you were on, and what steps led to the error you are reporting

1. Open 2 tabs with code in them that does an XHR every 5 seconds.
2. Open devtools in each of them. I think I had one with the network tab selected, and the other one with the console selected.
3. Open a third tab, put it in the foreground.
4. Capture a profile to see what's happening.

What happened?

https://share.firefox.dev/3wFKKSo showing:

• almost 1s of CPU time used on the parent process main thread every 5 seconds
• Sync layout flush at https://searchfox.org/mozilla-central/rev/e65d93ace2a618b58bf1497c5be8918404f6dbbe/devtools/client/netmonitor/src/components/request-list/RequestListHeader.js#548
• jank multiple times
• opacity animations on scrollbars.

What should have happened?

No jank, no significant graphics activity for devtools in background tabs.

Do you have extensions installed?

CORS Everywhere was installed. I don't think it plays a role here.

Comment 1

[Julian Descottes [:jdescottes]]

Thanks for the report Florian. Did this happen immediately, or did you have to wait for several hours/days before the jank started?

Comment 2

[Florian Quèze [:florian]]

(In reply to Julian Descottes [:jdescottes] from comment #1)

Thanks for the report Florian. Did this happen immediately, or did you have to wait for several hours/days before the jank started?

There were already a few thousand network requests in each tab, so probably at least a few hours.

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'DevTools::Netmonitor' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 4

[Alexandre Poirot [:ochameau]]

By removing the call to React forceUpdate, bug 1943364 may help speedup this scenario.

Comment 5

[Julian Descottes [:jdescottes]]

One thing to consider here is that in this scenario we don't really toggle the visibility of an existing panel, so forceUpdate was probably not applied. We basically have 3 tabs:

• two in the background:
  • one with devtools open on the console, on a page which does many requests, and a hidden netmonitor
  • another one with devtools open on the netmonitor, on the same page
• another foreground tab, on another page

And in this scenario, visibility handler will not detect that the panel is "hidden" because the owner tab is in the background. It's only triggered if the selected devtools panel changes. But maybe other improvements made recently will help. Testing on a recent central seems to show improvement compared to a 3 days old nightly.

Comment 6

[Alexandre Poirot [:ochameau]]

Attachment: Bug 1897765 - [devtools] Prevent doing React updates when DevTools is in a background tab. r=#devtools

Start using docShellIsActive on toolbox's <browser> element.
This attribute controls the document.visibilityState attribute
which is used by DevTools panels to stop doing React updates when a panel is hidden.

We synchronize docShellIsActive value with the debugged's tab <browser> element.

Unfortunately, this attribute can only be used on top level <browser> elements,
so that we can't use it against DevTools panels which used nested <xul:iframe>.
We have to keep the workaround in setIframeVisible, while acknowledging
the toolbox's visibility which can now be hidden.

Comment 7

[Pulsebot]

Pushed by [e-mail]:
https://github.com/mozilla-firefox/firefox/commit/08bf53f4758c
https://hg.mozilla.org/integration/autoland/rev/642551f72e56
[devtools] Prevent doing React updates when DevTools is in a background tab. r=devtools-reviewers,jdescottes,nchevobbe

Comment 8

[Cosmin Sabou [:CosminS]]

https://hg.mozilla.org/mozilla-central/rev/642551f72e56