Closed Bug 1828509 Opened 1 year ago Closed 1 year ago

Fix custom formatters within watch expressions


(DevTools :: Debugger, defect, P2)



(firefox114 fixed)

114 Branch
Tracking Status
firefox114 --- fixed


(Reporter: sebo, Assigned: nchevobbe)


(Blocks 2 open bugs)



(3 files)

Attached file 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


  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"


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

Not a regression.

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.

Assignee: nobody → nchevobbe

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

Severity: -- → S3
Priority: -- → P2
Pushed by
[devtools] Pass expression result front to ObjectInspector in Expressions panel. r=devtools-reviewers,ochameau.
[devtools] Use custom formatter in watch expressions. r=devtools-reviewers,ochameau.
Closed: 1 year ago
Resolution: --- → FIXED
Target Milestone: --- → 114 Branch
You need to log in before you can comment on or make changes to this bug.