1740080 - Developer Tools Inspector "computed rules" tree rows not expanding in Linux/MacOS

Status: NEW

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

Description

[frido.ferdinand]

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

Steps to reproduce:

• On Linux (x11+wayland) / macOS
• Open developer tools
• Highlight section with inspector
• Go to "Computed" tab
• Expand rule

Actual results:

• Some rules expand, others are locked (no dropdown)
• Sometimes switching between "Computed" and "Layout" tab unlocks the rules

Expected results:

• Expanding rules should work on first try

Comment 1

[frido.ferdinand]

Bug is not present on Windows 10

Comment 2

[BugBot [:suhaib / :marco]]

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

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Thank you for the report!

I was trying to reproduce on my Mac (Fx94), but I can't see any issues.

Could you please provide a link to the page (or attach a page here in the bug) that can be used to see the issue?
Having a reproducible test case is always a big help.
Thank you!

Honza

Comment 4

[frido.ferdinand]

Hi,

Seems that it only happens on a my site that was using ckeditor5, the public
demo also seems to exhibit the same behaviour. Try:

https://ckeditor.com/ckeditor-5/demo/

• choose classic editor
• inspector tool to: "<h2>The three greatest things you learn from travelling</h2>"
• if tab is already on "computed"
• open "font-size", stuck
• switch to "rules"
• back to "computed"
• "font-size" is now opened

also, this only triggers if "computed" is the first tab appearing directly after invoking developer tools.

Comment 5

[Julian Descottes [:jdescottes]]

Thanks for the info, we are getting the following stack trace:

13:40:43.217 TypeError: can't access property "namespaceURI", this.node is null
    get isSvg resource://devtools/server/actors/utils/inactive-property-helper.js:899
    get hasCssLayout resource://devtools/server/actors/utils/inactive-property-helper.js:755
    get nonReplacedInlineBox resource://devtools/server/actors/utils/inactive-property-helper.js:763
    when resource://devtools/server/actors/utils/inactive-property-helper.js:230
    isPropertyUsed resource://devtools/server/actors/utils/inactive-property-helper.js:466
    isPropertyUsed resource://devtools/server/actors/utils/inactive-property-helper.js:450
    declarations resource://devtools/server/actors/style-rule.js:437
    form resource://devtools/server/actors/style-rule.js:428
    write resource://devtools/shared/protocol/types.js:363
    write resource://devtools/shared/protocol/types.js:215
    write resource://devtools/shared/protocol/types.js:215
    write resource://devtools/shared/protocol/types.js:263
    write resource://devtools/shared/protocol/Response.js:99
    write resource://devtools/shared/protocol/Response.js:47
    sendReturn resource://devtools/shared/protocol/Actor.js:192