1857722 - Custom formatter should be called with proxy object

Status: RESOLVED FIXED

(DevTools :: Console, enhancement)

Description

[henbruas]

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

Comment 1

[henbruas]

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

Comment 2

[Nicolas Chevobbe [:nchevobbe]]

Attachment: Bug 1857722 - [devtools] Handle Proxy objects in custom formatter. r=#devtools-reviewers.

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.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

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

Comment 4

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/mozilla-central/rev/d08534f8a319
[devtools] Handle Proxy objects in custom formatter. r=devtools-reviewers,ochameau.

Comment 5

[Cristian Tuns]

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

Comment 6

[Sebastian Zartner [:sebo]]

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