1909170 - Showing "grid overlay" in the devtools will stress GPU and CPU

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[juraj.masiar]

Attachment: example.zip

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0

Steps to reproduce:

On some pages, the grid overlay will consume almost 100% GPU and high amount of CPU.
STR:

1. extract the "example.zip"
2. open "Dynamic.htm" page
3. open devtools / Inspector tab
4. find "#dials" node (use the "Search HTML" feature)
5. click the "grid" in the inspector to show grid overlay
6. observe GPU and CPU usage

Actual results:

GPU usage goes up to 99%
4 CPU cores seems to be fully utilized

Expected results:

I would expect almost none GPU usage, since there are no animations.
The CPU usage should be also limited, since nothing is moving, and there is no javascript running.

Comment 1

[juraj.masiar]

Attachment: grid_overlay_high_GPU/CPU

Comment 2

[cardonapaola060606]

Comment on attachment 9414066 [details]
grid_overlay_high_GPU/CPU

👍👍

Comment 3

[cardonapaola060606]

Comment on attachment 9414066 [details]
grid_overlay_high_GPU/CPU

👍👍

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Thanks for the report and the test case juraj. I was trying to reproduce the issue but everything seems to run fine on my machine.
Can you try to record a profile with the Firefox Profiler (https://profiler.firefox.com/), and post the link here, so we can see what's going on?

Comment 5

[juraj.masiar]

Hello Nicolas,
Here is the Nightly capture, about 40 seconds, first few seconds without overlay enabled:
https://share.firefox.dev/4dbehCV

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

(In reply to juraj.masiar from comment #5)

Hello Nicolas,
Here is the Nightly capture, about 40 seconds, first few seconds without overlay enabled:
https://share.firefox.dev/4dbehCV

Thanks!
So there is not indication that the page freezes or is under heavy load.
The overlay (we call them highlighters), are drawn using a requestAnimationFrame loop so if there is any animation/scrolling the overlay "sticks" to the elements. This can be seen in the profile for _startRefreshLoop: https://profiler.firefox.com/public/z4rmxes573hf1vbgjns472cg5qev2dhezdbhzj8/flame-graph/?globalTrackOrder=ab0w9&hiddenGlobalTracks=1w7&hiddenLocalTracksByPid=19068-0w4~15096-0~9220-0~14156-0~3192-0~11840-0~2544-0~3336-0w3~9892-2w7&implementation=js&thread=p&v=10

But again, this isn't bringing the page to its knee.
Maybe we could have extra checks to avoid having the rendering loop if there are no animation/scrolling. This doesn't look straightforward though, we'd also need to react to dom changes, viewport/element resizing and other things that might impact the layout of the page. I'll ask around to see if there could be a nice solution for this

Comment 7

[juraj.masiar]

Yes, the page works fine.
But the 25% of my CPU is gone... Not to mention extra fan speed and extra heat (in these host summer days).

It's weird though that this doesn't happen on simpler grids - when I tried to reproduce it on some grid examples on the web, it worked fine with no visible CPU/GPU usage. But when I use it with my page, it's always maxing out GPU and quarter of CPU.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

The grid highlighter is triggering a reflow on each rAF loop which might explain some of the issue you see. The paint might take longer with the image background I guess.
I tried to tweak the highlighter at https://treeherder.mozilla.org/jobs?repo=try&revision=b993fc35b4e93f192e72d931cada65bb862b0d5e&selectedTaskRun=BSYP0fevQdi2g7dKXX87Fw.0

Would you mind installing this version (I think you're on windows, so with this I think https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/BSYP0fevQdi2g7dKXX87Fw/runs/0/artifacts/public/build/setup.exe ), and tell me if you're still seeing high CPU/GPU ?
Make sure to create a new profile or use a temporary one to avoid any issue

Comment 9

[juraj.masiar]

It's not because of the background for sure, I should have picked more simple example :).

I'm not super happy about executing "setup.exe" as Admin on my main work PC. Any chance I can test this in normal Nightly in a day or two? :)
I did run it in my Windows VM but it doesn't install any files, all I get in the installation folder is:

d-----         23.7.2024     15:17                uninstall
-a----         23.7.2024     15:17          12758 install.log
-a----         23.7.2024     15:17            422 installation_telemetry.json

Also, the setup.exe has 930KB, is that OK?

Comment 10

[Nicolas Chevobbe [:nchevobbe]]

(In reply to juraj.masiar from comment #9)

It's not because of the background for sure, I should have picked more simple example :).

If you can build a simpler one with a HTML file and attach it, that would be great

I'm not super happy about executing "setup.exe" as Admin on my main work PC. Any chance I can test this in normal Nightly in a day or two? :)

Well, I wanted to check with you if that was solving the issue before I move on and request review on that patch :)

I did run it in my Windows VM but it doesn't install any files, all I get in the installation folder is:

d-----         23.7.2024     15:17                uninstall
-a----         23.7.2024     15:17          12758 install.log
-a----         23.7.2024     15:17            422 installation_telemetry.json

Also, the setup.exe has 930KB, is that OK?

Ah, wrong exe I guess, maybe https://firefox-ci-tc.services.mozilla.com/api/queue/v1/task/BSYP0fevQdi2g7dKXX87Fw/runs/0/artifacts/public/build/install/sea/target.installer.exe

Comment 11

[juraj.masiar]

Attachment: ubuntu CPU usage with/without grid overlay

You've mentioned you can't reproduce it, but it seems to reproduce on my Ubuntu.
Look at the picture, left is without overlay and no CPU usage, and on the right with overlay and huge CPU usage (more than 25%). Also I've removed the background image :)
Is this not happening on your PC?

I'll try to test your build when get back to work.

Comment 12

[Julian Descottes [:jdescottes]]

Just in case, did you try the scenario with a clean profile?

Comment 13

[juraj.masiar]

Attachment: Firefox 130.0a1 (2024-07-23) on the left and Julian's fixed build on the right

Hello Julian,
I'm developing with clean profile (created with web-ext) so yes, it will happen with clean profile too.

I've just tested your build and it works!
See the screenshot (left Nightly, right your build), your build will consume no visible CPU at all.
Thanks a lot for the fix!

I have a one more request though - since I'm developing using Firefox ESR, could you please request also uplift for the upcoming ESR 128 version? (once it goes through Nightly/Beta)
Thanks again!

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1909170 - [devtools] Don't trigger reflow in grid and flex highlighter update. r=#devtools-reviewers.

The update function can be called a lot when scrolling/resizing the window.
The line where we were forcing the reflow were added in Bug 1312103, as a way
to fix a lag during scrolling.
Removing the reflow, I don't see any lag anymore (it might be because the
anonymous content implementation changed).
We take this as an opportunity to refactor things a bit, directly manipulating
the element we need to handle instead of going through the anonymous content API
(e.g. setAttribute, which was showing in profiles).

Comment 15

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/aabd1836df37
[devtools] Don't trigger reflow in grid and flex highlighter update. r=devtools-reviewers,jdescottes.

Comment 16

[pstanciu]

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

Comment 17

[juraj.masiar]

Attachment: down: Nightly 130 VS up 131.0a1 (2024-08-05)

I've just tested it in Nightly 131.0a1 (2024-08-05) and it works great.
No GPU usage and no CPU usage while overlay is ON.
Thank you!