Bug 142069 – Web Inspector: console.error(object) has double disclosure triangles

• Component: Web Inspector
• Status: RESOLVED FIXED

[Joseph Pecoraro]

* SUMMARY
console.error(object) has double disclosure triangles

* STEPS TO REPRODUCE
1. js> console.error(window.navigator)
2. Expand the object
  => double disclosure triangles everywhere

* NOTES
This is due to console.error wanting to be expandable itself to offer a call-stack, and yet having too generic CSS selectors that it causes its own disclosure triangles to show in front of TreeElements inside object-tree / object-preview. Console styles should be improved.

[Radar WebKit Bug Importer]

<rdar://problem/19980232>

[Joseph Pecoraro]

This also affects DOM Nodes in the console.

For instance expand [document.body] and the general outline-disclosure styles are modifying the DOM Node styles inside the ObjectTree.

[Joseph Pecoraro]

(In reply to comment #2)
> This also affects DOM Nodes in the console.

Addressed nodes in bug 143179.

The next step is making Console Message Styles only go one level deep. Console Message's do not need to style all sub-<ol> / sub-<li> anymore. Only their immediate list. Things like ".outline-disclosure li" end up affecting styles inside ObjectTreeViews, hence the double disclosure triangles.

[Nikita Vasilyev]

Created attachment 249711 [details]
[GIF] Safari 8 behavior

-> console.error(navigator)
<< ►► Navigator

In Safari 8, the first ► expands the stack trace and the another one expands the passed object.

Do we want to keep this behavior?

[Timothy Hatcher]

No, the inline stack traces is a horrid UI. I want the stack traces to be part of the message location like the first error shown on the mock up at: http://timothy.hatcher.name/console/

[Nikita Vasilyev]

Created attachment 249793 [details]
[Image] Before/After

[Nikita Vasilyev]

Created attachment 249794 [details]
Patch

[Nikita Vasilyev]

(In reply to comment #5)
> No, the inline stack traces is a horrid UI. I want the stack traces to be
> part of the message location like the first error shown on the mock up at:
> http://timothy.hatcher.name/console/

I agree that the stack trace dropdown is a better UI. However, in this bug I only fixed the regression.

[Timothy Hatcher]

Comment on attachment 249794 [details]
Patch

The disclosure triangle looks too close to the object name on the top line. Can you add some more margin there?

[Nikita Vasilyev]

Created attachment 249886 [details]
Patch

Added "margin-right: 2px" to keep the current look.

[WebKit Commit Bot]

Comment on attachment 249886 [details]
Patch

Clearing flags on attachment: 249886

Committed r182221: <http://trac.webkit.org/changeset/182221>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.

[Joseph Pecoraro]

(In reply to comment #10)
> Created attachment 249886 [details]
> Patch
> 
> Added "margin-right: 2px" to keep the current look.

For a follow-up, I think that a console.log/error/* with a single non-string object should produce the same thing as console.dir(o).

[Joseph Pecoraro]

(In reply to comment #13)
> (In reply to comment #10)
> > Created attachment 249886 [details]
> > Patch
> > 
> > Added "margin-right: 2px" to keep the current look.
> 
> For a follow-up, I think that a console.log/error/* with a single non-string
> object should produce the same thing as console.dir(o).

Well, instead of console.dir (which forces object expansion) it should be the same as a console evaluation of "o" which can just be a preview without expansion.