Closed Bug 1857722 Opened 8 months ago Closed 8 months ago

Custom formatter should be called with proxy object

Categories

(DevTools :: Console, enhancement)

Firefox 118
enhancement

Tracking

(firefox121 fixed)

RESOLVED FIXED
121 Branch
Tracking Status
firefox121 --- fixed

People

(Reporter: henbruas, Assigned: nchevobbe)

References

(Blocks 1 open bug)

Details

Attachments

(1 file)

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

Steps to reproduce:

Enable custom formatters and run the following:

const target = {foo: "bar"};
const handler = {};
const proxy = new Proxy(target, handler);
window.devtoolsFormatters = [
  {
    header(obj, config) {
      console.log(obj === proxy, obj === target, obj === handler);
      return null;
    }
  }
];
console.log(proxy);

Actual results:

It logged

false true false
false false true
```, indicating that the custom formatter was called twice, once with the target object and once with the handler object.


Expected results:

I  expected it to log

true false false

Sorry, messed up the formatting, was supposed to be:
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/118.0
Steps to reproduce:

Enable custom formatters and run the following:

const target = {foo: "bar"};
const handler = {};
const proxy = new Proxy(target, handler);
window.devtoolsFormatters = [
  {
    header(obj, config) {
      console.log(obj === proxy, obj === target, obj === handler);
      return null;
    }
  }
];
console.log(proxy);

Actual results:

It logged

false true false
false false true

, indicating that the custom formatter was called twice, once with the target object and once with the handler object.

Expected results:

I expected it to log

true false false

, indicating that the custom formatter was called once with the proxy object. This is the behavior in Chrome. Vue's custom formatter relies on this behavior to format reactive objects because those are based on proxies: https://github.com/vuejs/core/blob/b8fc18c0b23be9a77b05dc41ed452a87a0becf82/packages/runtime-core/src/customFormatter.ts#L38

Flags: needinfo?(nchevobbe)

We were catching Proxy object in the ObjectActor before
we're calling the custom formatter machinery, so we weren't
calling the custom formatter hooks with Proxy objects.
A test is added to ensure these are handled now.
I had to switch the test to use findMessageVirtualizedByType
as the new logged message might be outside of the viewport.

Assignee: nobody → nchevobbe
Status: UNCONFIRMED → ASSIGNED
Ever confirmed: true

Thanks for the report henbruas
I pushed a patch to fix this

Flags: needinfo?(nchevobbe)
Pushed by ctuns@mozilla.com:
https://hg.mozilla.org/mozilla-central/rev/d08534f8a319
[devtools] Handle Proxy objects in custom formatter. r=devtools-reviewers,ochameau.
Status: ASSIGNED → RESOLVED
Closed: 8 months ago
Resolution: --- → FIXED
Target Milestone: --- → 121 Branch

Interestingly, the output of the example above with the patch is now

true false false
false true false
false false true

So it is now called thrice. Though expected is once.

Sebastian

Blocks: 1776611
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Created:
Updated:
Size: