1686240 - Inspector is slow when selecting a new node on youtube

Status: NEW

(DevTools :: Inspector, defect, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

See this profile: https://profiler.firefox.com/public/3sgfynkpr7wp2pdj8k70wkj8g5dbswx6jcwbj1r/calltree/?globalTrackOrder=6-1-2-3-0-4-5&hiddenGlobalTracks=1-2-3&hiddenLocalTracksByPid=6900-1-2-3-4-5~1164-1-2~8508-0-1&implementation=js&localTrackOrderByPid=6900-6-0-1-2-3-4-5~1164-0-1-2~8508-2-0-1~&thread=0&v=5

Each selection causes a ~1s jank

Comment 1

[Julian Descottes [:jdescottes]]

Youtube is known to have many styles. This was already significantly improved by Bug 1623988. Believe it or not, it was ~5 times slower before FF78. The next steps here were to try virtual/lazy viewports for the Rules view if I remember correctly.

There is also already a DAMP test for this: https://treeherder.mozilla.org/perfherder/graphs?highlightAlerts=1&highlightChangelogData=1&series=mozilla-central,2408425,1,12&timerange=7776000

Comment 2

[Razvan Caliman [:rcaliman]]

YouTube has many, many CSS custom properties defined on :root which end up being inherited by all nodes.

This puts pressure both on the server which serializes them all and on the client which renders them all. Google Chrome throttles rendering of many CSS declarations with "show more" links.

The performance hit is exacerbated by processing done on the client side, like marking overwritten declarations, decorating them with color swatches, etc.

Comment 3

[piotr.b.kozuchowski]

Here's similar performance issue from Salesforce web development:
https://share.firefox.dev/3yB4IJC
https://share.firefox.dev/3fSZ3r1

Salesforce also uses CSS custom properties and many of them - the element I was inspecting have 3661 properties.
I think it's a safe bet that noone will need to see all of them for every element :) I'd suggest 2 improvements here:

1. Show only limited number of properties right away and the rest after clicking Expand button (honestly speaking, I never had to lookup properties, personally it would be sufficient for me if I could navigate to propty from the class/style that used it, but that's just me)
2. Move that property loading logic to background job, so it doesn't freeze entire browser - the pane would show spinner until props are loaded

Kind Regards