1312250 - Display non default properties before others, with specific styling

Status: UNCONFIRMED

(DevTools :: DOM, defect, P2)

Description

[Salar]

Feature Request:
In DOM tab, in the list, user defined objects should be on top of the list and preferably in bold.
This new behavior is like the way Firebug does it.

Comment 1

[Jan Honza Odvarko [:Honza] (always need-info? me)]

Yes, agreed, this would be great to have.

Honza

Comment 2

[y.gravrand]

Hi,

I think I tracked down properties enumeration to ``devtools/client/dom/content/reducers/grips.js``.
If I understand correctly, these properties are sorted there and then appear in a TreeView (``devtools/client/dom/content/components/dom-tree.js``), where there are displayed as Reps, each Rep type having its own render in ``devtools/client/shared/components/reps`` (I am sure I am taking shortcuts here...)

What I can't really see is where we have the information that the property is a "User defined" object, so that we can sort and also display accordingly?

Comment 3

[Jan Honza Odvarko [:Honza] (always need-info? me)]

(In reply to y.gravrand from comment #2)
> What I can't really see is where we have the information that the property
> is a "User defined" object, so that we can sort and also display accordingly?
AFAIK there is no such information.

Firebug had a list of all built-in window props and every object that wasn't in the list was treated as user-defined. Obviously, keeping the list up to date required some maintenance.

Better approach could be to build the list dynamically from an empty window. This should be done by devtools server (backend) and info about user-defined objects send to the client as part of the grip packet.

@Alex, what do you think about this? Would it be a problem to extend the protocol and send also an information about whether a window props is user defined or built-in?

Honza

Comment 4

[Alexandre Poirot [:ochameau]]

(In reply to Jan Honza Odvarko [:Honza] from comment #3)
> @Alex, what do you think about this? Would it be a problem to extend the
> protocol and send also an information about whether a window props is user
> defined or built-in?

Do you only need this feature against the global scope of documents? (i.e. the window object)

Can't the grip flag each property to indicate if that's user defined or not?
May be through an option? I don't know what's the best way to check for user defined, but xray wrapper may help as it hides content objects and only exposes DOM interfaces. But chrome expandos may confuse your code as any chrome code may add expandos (new custom property) on them.

Otherwise do you already have an actor specific to the DOM panel where you would put your "get window built-ins names" request? Also note that this would not highlight properties being overloaded by the page.

I think I'm fine with whatever solution you come up with as soon as it is efficient! I'm especially concerned here about the performances of this. (Object.getOwnPropertyNames(window).length on an empty document is 800!)

Comment 5

[Mannilthodi Muhammed ismail]

hi ,
can anybody suggest me how to setup a developer environment , at least name of the tools , i am very much interested to see the coding flow and future i can also become a contributor or supporter ,

i saw some reference for build system , i tried to do that .
but the real thing i am looking for some platform where i can edit the code or debug the code , so kindly requesting any one to help me in this regards..plzz

Comment 6

[Suzanne5681]

https://www.tellsubway.website/

Comment 7

[JeffreyFisher]

That is a good feature request. It would be helpful to be able to quickly identify user-defined objects in the DOM tree. Bolding them and putting them at the top of the list would make them stand out and make them easier to find.

I can imagine that this feature would be especially useful for developers who are debugging JavaScript code. It would help them to quickly find the objects that they created and to see how they are interacting with other objects in the DOM tree.

I would recommend submitting this feature request to the OBS developers. You can do this by creating a new thread in the OBS forum. Be sure to include a detailed description of the feature and why you think it would be useful.

Here are some additional things that you could mention in your feature request:

How would this feature benefit users?
How would this feature be implemented?
Are there any other similar features in other ?
Are there any potential drawbacks to this feature?
I hope that the OBS developers will consider adding this feature to the next version of OBS. It would be a valuable addition for developers and other users who need to debug JavaScript code.

Thank you for your suggestion!

Comment 8

[pataamir]

If you have ever been to an Autozone location, it is time for you to complete the Autozone Customer Experience Survey so that we can learn more about how you really feel about the company.
<a href="https://subweylistens.shop/">https://subweylistens.shop/</a>

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

Note that we do that in the ObjectInspector. How we do it is definitely not ideal but is good enough https://searchfox.org/mozilla-central/rev/da49863c3d6f34038d00f5ba701b9a2ad9cbadba/devtools/client/shared/components/object-inspector/utils/node.js#39-43,179-181

let WINDOW_PROPERTIES = {};

if (typeof window === "object") {
  WINDOW_PROPERTIES = Object.getOwnPropertyNames(window);
}
...
function isDefaultWindowProperty(name) {
  return WINDOW_PROPERTIES.includes(name);
}