1922511 - Don't send custom property declarations to getCSSDeclarationBlockIssues

Status: VERIFIED FIXED

(DevTools :: Inspector: Rules, task)

Description

[Nicolas Chevobbe [:nchevobbe]]

Those are completely ignored on the server, so let's not send them in the first place to save some cycle

https://searchfox.org/mozilla-release/rev/6e55285b90d6b7aedbcbbd3a9c132552b07c5ba6/devtools/server/actors/compatibility/lib/MDNCompatibility.js#55,57-61

getCSSDeclarationBlockIssues(declarations, browsers) {
...
  for (const { name: property } of declarations) {
    // Ignore CSS custom properties as any name is valid.
    if (property.startsWith("--")) {
      continue;
    }

Comment 1

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1922511 - [devtools] Don't send custom property declarations to getCSSDeclarationBlockIssues. r=#devtools-reviewers.

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1922511 - [devtools] Avoid sending custom property declarations to getCSSDeclarationBlockIssues. r=#devtools-reviewers.

Those declarations are already ignored on the server, as custom property
declaration can't have compatibility issues.
On pages with lots of CSS variables, we were still paying the price of
iterating over those and sending them through RDP, which could be costly.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/45fb146740e0
[devtools] Avoid sending custom property declarations to getCSSDeclarationBlockIssues. r=devtools-reviewers,ochameau.

Comment 4

[tszentpeteri]

https://hg.mozilla.org/mozilla-central/rev/45fb146740e0

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1922511 - [devtools] Avoid sending custom property declarations to getCSSDeclarationBlockIssues. r=#devtools-reviewers.

Those declarations are already ignored on the server, as custom property
declaration can't have compatibility issues.
On pages with lots of CSS variables, we were still paying the price of
iterating over those and sending them through RDP, which could be costly.

Original Revision: https://phabricator.services.mozilla.com/D224472

Comment 6

[Phabricator Automation]

beta Uplift Approval Request

• User impact if declined: DevTools Inspector completely freezes when inspecting a page using lots of CSS variables
• Code covered by automated testing: no
• Fix verified in Nightly: no
• Needs manual QE test: yes
• Steps to reproduce for manual QE testing: Follow steps from https://bugzilla.mozilla.org/show_bug.cgi?id=1922469#c0
• Risk associated with taking this patch: low
• Explanation of risk level: simple DevTools only fix
• String changes made/needed: -
• Is Android affected?: no

Comment 7

[Pulsebot]

https://hg.mozilla.org/releases/mozilla-beta/rev/fa3a45c8149e

Comment 8

[Bianca Hidecuti, Desktop Test Engineering [:bhidecuti]]

I was able to reproduce the issue on an affected Firefox 132.0b3 build, using macOS 14.6, while following the steps from https://bugzilla.mozilla.org/show_bug.cgi?id=1922469#c0, as mentioned in Comment 6.
Verified as fixed using Firefox Nightly 133.0a1 (2024-10-06) and Firefox 132.0b4 (treeherder build from Comment 7), on macOS 14.6, Windows 11 and Ubuntu 22.04. The inspector is no longer freezing after pressing the "Open dialog" button from https://sanomalearning.design/categories/components/dialog/usage/.