1828509 - Fix custom formatters within watch expressions

Status: RESOLVED FIXED

(DevTools :: Debugger, defect, P2)

Description

[Sebastian Zartner [:sebo]]

Attachment: test case.html

Variables within the watch expressions panel may already be displayed via a custom formatter, though their body currently can't be expanded.

The related error message:

TypeError: can't access property "customFormatterBody", this.props.front is null custom-formatter.js:57:26

STR:

1. Toggle the prefs devtools.custom-formatters and devtools.custom-formatters to true
2. Open the attached test case
3. Switch to the Debugger panel
4. Add variable as watch expression
5. Reload the page
6. Click the custom formatted "foo"

Sebastian

Comment 1

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

:sebo, if you think that's a regression, could you try to find a regression range using for example mozregression?

Comment 2

[Sebastian Zartner [:sebo]]

Not a regression.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1828509 - [devtools] Pass expression result front to ObjectInspector in Expressions panel. r=#devtools-reviewers.

With the current implementation, we were always passing a null front property
for the ObjectInspector root for a given expression.
The front is needed in CustomFormatter so the the body can be retrieved.

Doing this revealed an issue in ObjectInspector rootsChanged action, where we
were releasing actors while they might still be needed.
We now only release actors that are not in the new roots.
This was not visible before because we were only dealing with a grip before,
and we'd create a new ObjectActor whenever we needed to fetch the properties
from it.

This also showed that the key for the Expression li was a bit incorrect.
We were only using the expression inputand so if you refreshed the expressions
the ObjectInspector might not get refreshed.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1828509 - [devtools] Use custom formatter in watch expressions. r=#devtools-reviewers,sebo.

Most of the work needed for this was done in the previous patch of the stack,
but there were a few things we needed to do:

• actually have styling for the expand arrow in reps.css (in the console we're
  (getting the "global" rule for styling arrows)
• not display the expand arrow before the expression label for custom formatter
  with body. The custom formatter handles fetching and displaying body by itself,
  and we shouldn't leak that to the parent ObjectInspector

A test is added to ensure that this works as expected.

We might need a follow up for updating the expression panel style as "wide"
custom formatter might get hidden at certain sizes which isn't great

Depends on D175846

Comment 5

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/33178787a4ff
[devtools] Pass expression result front to ObjectInspector in Expressions panel. r=devtools-reviewers,ochameau.
https://hg.mozilla.org/integration/autoland/rev/5539f0e5eec7
[devtools] Use custom formatter in watch expressions. r=devtools-reviewers,ochameau.

Comment 6

[Norisz Fay [:noriszfay]]

https://hg.mozilla.org/mozilla-central/rev/33178787a4ff
https://hg.mozilla.org/mozilla-central/rev/5539f0e5eec7