1380501 - [meta] Add ability to open an expanded ObjectInspector in a sidebar

Status: NEW

(DevTools :: Console, enhancement)

Description

[Oriol Brufau [:Oriol]]

Previously, if I had two big object references in the console, I could click them alternatively to inspect them. Variablesview was intelligent enough to highlight the properties that had different values, so it was easy to compare objects.

Object inspect is good for small objects but not for big ones, because I need to scroll a lot and it's not easy to directly compare.

The workaround is right-clicking the objects to store them as global variables temp0 and temp1, and then use inspect(temp0) and inspect(temp1).

But this is tedious. Please add a context menu entry which says "Inspect in VariablesView" or something like this.

Comment 1

[Brian Grinstead [:bgrins]]

(In reply to Oriol [:Oriol] from comment #0)
> Previously, if I had two big object references in the console, I could click
> them alternatively to inspect them. Variablesview was intelligent enough to
> highlight the properties that had different values, so it was easy to
> compare objects.
>
> Object inspect is good for small objects but not for big ones, because I
> need to scroll a lot and it's not easy to directly compare.
> 
> The workaround is right-clicking the objects to store them as global
> variables temp0 and temp1, and then use inspect(temp0) and inspect(temp1).
> 
> But this is tedious. Please add a context menu entry which says "Inspect in
> VariablesView" or something like this.

We are moving away from the variables view in the new frontend. This is partly a technical decision as we are converting to HTML, but also we made a UX decision to make object contents inspectable next to the rest of the messages instead of in a sidebar. I'd be open to revisit that and provide a way to open Object Inspectors in a sidebar but it won't be done technically with the variables view. Please continue to file issues where you see gaps between the VView and the Object Inspector, they are very helpful.

As for diffs, I'd like to think of a way to represent them in the new console either with the Object Inspector or through a console command (something like `diff(obj1, obj2)` that might render a git-like diff). Please let us know if you have particular ideas about that - is the VView highlighting your ideal way to see diffs or could it be improved upon?

Comment 2

[Oriol Brufau [:Oriol]]

Yes, `diff(obj1, obj2)` would be useful.

However, VariablesView is also useful when you have various deep objects with similar structure and you are only interested on a small part of them. I can expand the desired part, and when I inspect another object, it's auto-expanded in the same way.
I'm not sure a diff command would cover this case, because most values could be completely different and it would be difficult to find the desired part among them, and I could also be interested on the values which coincide.

So I guess you could add an option to open the Object Inspector in the sidebar, and remember the expanded properties like VariablesView does.

Comment 3

[Brian Grinstead [:bgrins]]

(In reply to Oriol [:Oriol] from comment #2)
> Yes, `diff(obj1, obj2)` would be useful.
> 
> However, VariablesView is also useful when you have various deep objects
> with similar structure and you are only interested on a small part of them.
> I can expand the desired part, and when I inspect another object, it's
> auto-expanded in the same way.
> I'm not sure a diff command would cover this case, because most values could
> be completely different and it would be difficult to find the desired part
> among them, and I could also be interested on the values which coincide.

Yeah, it would work best only when they are two nearly identical objects

> So I guess you could add an option to open the Object Inspector in the
> sidebar, and remember the expanded properties like VariablesView does.

I think that's worth exploring further - I'm going to rename the bug to match

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

> However, VariablesView is also useful when you have various deep objects with similar structure and you are only interested on a small part of them. I can expand the desired part, and when I inspect another object, it's auto-expanded in the same way.

The `diff` UI, could be smarter than a git diff one. It would still look like an ObjectInspector, and we could auto expand one tree when the user expand the other, so we have the behavior that you talk about, but you don't have to switch back and forth in 2 different objects.
We could experiment this behind a flag so we can experiment with the UI and get feedback from people that might be interested in such feature.

Comment 6

[Alexandre Poirot [:ochameau]]

(In reply to Oriol Brufau [:Oriol] from comment #0)
> Previously, if I had two big object references in the console, I could click
> them alternatively to inspect them. Variablesview was intelligent enough to
> highlight the properties that had different values, so it was easy to
> compare objects.

I also found this feature really neat when you happen to need to diff objects,
but as you said, I'm not sure it justifies bringing back a sidebar mode on its own.

> Object inspect is good for small objects but not for big ones, because I
> need to scroll a lot and it's not easy to directly compare.

But I think this argument justifies the sidebar mode.
When you talk about scroll, sidebar brings an immediate value.
1/ You make the scroll between object inspection and console logs independant.
2/ Object inspection has a dedicated full height scroll.

When you have tons of console logs, it is harder to control scroll and it becomes really painful to inspect big objects.
STR: scroll down to the end of properties, now scroll back to the first one.

Also, another argument would be filtering. We still have no filtering, but I imagine it may also be easier to come up with a UI in a sidebar than inlined.

Comment 7

[buhhcz]

Wery sad that you removed the ability to inspect objects in a convenient way, hope you will back it next releases.

Quick view in a console like it's made in FF57+ and a separate detailed view with an ability to search for key/value and compare would be great usability improvement.

Please take a look at that issue, thats one of a thing that developers use every day.

Thanks for all your work on improving FF. Best regards.

Comment 8

[Nicolas Chevobbe [:nchevobbe]]

(In reply to buhhcz from comment #7)
> Wery sad that you removed the ability to inspect objects in a convenient
> way, hope you will back it next releases.
> 
> Quick view in a console like it's made in FF57+ and a separate detailed view
> with an ability to search for key/value and compare would be great usability
> improvement.
> 
> Please take a look at that issue, thats one of a thing that developers use
> every day.
> 
> Thanks for all your work on improving FF. Best regards.

Hello :) Many people are very happy to be able to open multiple objects at once (which you couldn't do previously).
But we know some people also liked the sidebar, hence this bug. Work is planned to take place in the weeks to come (probably not with search ability at the beginning).

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

When implementing this, think of Bug 907875, i.e. have a convenient element to close the sidebar.

Comment 10

[Victoria Wang [:victoria]]

I like the idea of a sidebar icon displayed somewhere next to each object. (I still need to work out exactly where this could go.) 

Users would still be able to click the name of the object to open inline, but users could click the sidebar icon to open in sidebar. When the sidebar is showing, we can show the Debugger "close sidebar" button to the left of the sidebar toolbar.

Comment 11

[buhhcz]

Sorry if it's has been posted already or if i post it in wrong thread.

I found a bug with object inspect which has integer keys.
If you execute this code in console you wont be able to inspect object "obj".

var obj = {
    2: {
        key: 'val'
    }
};
obj;


Result will be: 
Object [ <2 empty slots>, {…} ]


Firefox 57 (64bit), Windows 7

Comment 12

[Nicolas Chevobbe [:nchevobbe]]

(In reply to buhhcz from comment #11)
> Sorry if it's has been posted already or if i post it in wrong thread.
> 
> I found a bug with object inspect which has integer keys.
> If you execute this code in console you wont be able to inspect object "obj".
> 
> var obj = {
>     2: {
>         key: 'val'
>     }
> };
> obj;
> 
> 
> Result will be: 
> Object [ <2 empty slots>, {…} ]
> 
> 
> Firefox 57 (64bit), Windows 7

It looks like Bug 1371936, which is fixed in Nightly.

Comment 13

[Victoria Wang [:victoria]]

Idea for more prominent sidebar access (I mentioned this in slack but wanted to post here as well):

Perhaps the Console sidebar could work like the Network sidebar in this way:

- Display a single "open in sidebar" icon in the right side of the toolbar
- Click it to open sidebar details for the selected (or if nothing is selected, last-logged) object. Open-in-sidebar icon turns into a close-sidebar icon.
- When sidebar is open, user can click a different object's name to open in sidebar for comparison
- At any step of the way, user can instead click the disclosure arrow on an object to (also) open inline

Comment 14

[Nicolas Chevobbe [:nchevobbe]]

(In reply to Victoria Wang [:victoria] from comment #13)
> Idea for more prominent sidebar access (I mentioned this in slack but wanted
> to post here as well):
> 
> Perhaps the Console sidebar could work like the Network sidebar in this way:
> 
> - Display a single "open in sidebar" icon in the right side of the toolbar
> - Click it to open sidebar details for the selected (or if nothing is
> selected, last-logged) object. Open-in-sidebar icon turns into a
> close-sidebar icon.
> - When sidebar is open, user can click a different object's name to open in
> sidebar for comparison
> - At any step of the way, user can instead click the disclosure arrow on an
> object to (also) open inline

Thanks for putting down this Victoria :)
The only thing I'm worried here, is that we introduce 2 different "modes".
Say you want to expand/collapse an object. At the moment, you can click anywhere (but hypotetical icons) and it will do what you want.
With this idea, if the sidebar is open, the user would have to remember that if they wants to expand inline (i.e. , not in the sidebar), they'll have to hit the arrow (or another part but the name).
Which means performing the same actions (clicking on the name), will have 2 different consequences depending on the context (sidebar is open or not).

This can lead to frustration in my opinion. For example, you used the context menu entry to put an object in the sidebar. Now you want to compare it to another logged object. You try to expand said object, but because you hit the name, it gets moved to the sidebar, and you've lost track of the first object, which may lead to anger :D

It was fine on the old console because there was only the sidebar to inspect an object and the experience was reliable, which won't be the case anymore.

Comment 15

[Jason Sudan]

Attachment: same problem

Thanks from pittsaregri1986.