1956149 - Devtools: the object inspector does not show private properties of custom elements

Status: RESOLVED FIXED

(DevTools :: Inspector, defect, P3)

Description

[cob.bzmoz]

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

Steps to reproduce:

Create a custom element class that has private properties (i.e. #foo), and add that class to the custom element registry. Log an instance of the custom element to the console.

Actual results:

Only the element's non-private properties are visible in the object inspector.

Expected results:

All of the element's properties, including private properties, should be visible in the object inspector.

Comment 1

[cob.bzmoz]

Attachment: testcase.html

This HTML file demonstrates the bug, by logging two objects to the console:

• A custom element instance that contains both a public property and a private property.
• A non-element class instance that contains two public properties and one private property.

The object inspector only displays the private properties of the latter. The former's public properties are displayed, though they are mixed in amongst the DOM properties.

As a point of comparison, Chrome doesn't allow you to inspect the properties of a DOM node directly within the Console panel, but its Elements panel has a "Properties" tab which lists all properties, with non-DOM properties sorted above DOM properties and with private properties shown.

Comment 2

[BugBot [:suhaib / :marco/ :calixte]]

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

Comment 3

[cob.bzmoz]

Attachment: Bug 1956149 - The DOMNode previewer now stores the private property count. r?#devtools-reviewers

An ObjectInspector will only attempt to display private properties for a grip if its preview has a non-falsy privatePropertiesLength value. This commit alters the DOMNode previewer to write that value using the same logic as the GenericObject previewer, so that DOM nodes have private properties shown as child reps in the inspector.

Comment 4

[cob.bzmoz]

ObjectInspector checks whether it should enumerate an inspected object's private properties via shouldLoadItemPrivateProperties, which in turn requires that the object have a preview with a non-falsy privatePropertiesLength. The GenericObject previewer fills that field and a few others in order to allow generic Objects to show private properties. This patch alters the DOMNode previewer to fill privatePropertiesLength using the same logic, without bothering to store the other preview fields related to private properties.

The preview feels like a messy place to deal with this issue: generic objects show properties in their previews, so they need private property information there, and the ObjectInspector just opts to reuse that information; but DOM nodes don't show any properties in their own previews. It may be cleaner to instead alter shouldLoadItemPrivateProperties so that it checks whether the preview has a private properties count or the item parameter is an element. There isn't a function in that file which we could use to check whether the item is an element, but we could follow the same pattern as functions like nodeIsMapEntry and write a function which checks ElementNode.supportsObject. Looking at the implementation of ElementNode.supportsObject, we see that it... checks a field on the preview. Maybe the preview isn't too messy after all.

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/c13119d86eaf
The DOMNode previewer now stores the private property count. r=devtools-reviewers,nchevobbe

Comment 6

[Serban Stanca [:SerbanS]]

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