1903632 - Inspector is very slow on pages with a lot of declarations

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[Roman Kozlov]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:127.0) Gecko/20100101 Firefox/127.0

Steps to reproduce:

On some pages (probably where there are lots of CSS rules/properties) DevTools Inspector tab works very slowly: after a click on some element in the DOM tree the whole browser becomes unresponsive (freezes) for about 5-10 seconds, consuming 100% of one CPU core. This is probably related to the "Rules" panel, because when I hide it (switch to "Layout", for example) the problem disappears.
So far I found only one publicly-accessible site where you can reproduce this: hh.ru. For example, open https://hh.ru/locale?language=EN&backUrl=%2Fsearch%2Fresume%3Farea%3D85 (it will take you to the English version of the resume search page) and try to use DevTools to inspect various parts of the page.

I also tried Nightly, doesn't seem to be different. But I collected a performance profile in Nightly: https://share.firefox.dev/3VLCh9X (timeline: click in Inspector - at about 2.0s, unfreeze - at about 12.5s).

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Thanks Roman for the bug report and for the profile.
I can reproduce the issue easily, and I isolated going from an empty rule (with the doctype node selected), to a busy one (selecting the body): https://share.firefox.dev/45uUY55
Note that this page has a lot of declarations, with thousands of css variables.

There are different areas contributing to the slowness:

1. slow reflow + style computation (https://share.firefox.dev/4cwXQRf ), because of scrollTop = 0 in selectElement https://searchfox.org/mozilla-central/rev/74518d4f6979b088e28405ba7e6238f4707639cf/devtools/client/inspector/rules/rules.js#1013,1080

selectElement(element, allowRefresh = false) {
...
          this.element.scrollTop = 0;

2. clearing the rules is also slow (going from body selected in markup view to doctype node https://share.firefox.dev/45Al4nm) https://searchfox.org/mozilla-central/rev/74518d4f6979b088e28405ba7e6238f4707639cf/devtools/client/inspector/rules/rules.js#1213-1218

/**
 * Clear the rules.
 */
_clearRules() {
  this.element.innerHTML = "";
},

3. Creating all RuleEditor and their TextPropertyEditor (https://share.firefox.dev/45uVU9B).

4. _hasUpdatedCSSVariable is taking half a second (https://share.firefox.dev/3VQSGdo), I guess because of the iterations on the Set that is probably quite large here https://searchfox.org/mozilla-central/rev/74518d4f6979b088e28405ba7e6238f4707639cf/devtools/client/inspector/rules/models/element-style.js#507-515

_hasUpdatedCSSVariable(declaration, variableNamesSet) {
  for (const variableName of variableNamesSet) {
    if (declaration.hasCSSVariable(variableName)) {
      return true;
    }
  }

  return false;
}

---

We can probably investigate each of those area as blocking bugs on this one

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Note that hiding the unused CSS variables could help here (see Bug 1719461)