Bug 142069 - Web Inspector: console.error(object) has double disclosure triangles
Summary: Web Inspector: console.error(object) has double disclosure triangles
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Web Inspector (show other bugs)
Version: 528+ (Nightly build)
Hardware: All All
: P2 Normal
Assignee: Nikita Vasilyev
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2015-02-26 18:30 PST by Joseph Pecoraro
Modified: 2015-04-04 11:12 PDT (History)
8 users (show)

See Also:


Attachments
[GIF] Safari 8 behavior (165.83 KB, image/gif)
2015-03-29 23:46 PDT, Nikita Vasilyev
no flags Details
[Image] Before/After (149.78 KB, image/png)
2015-03-30 20:52 PDT, Nikita Vasilyev
no flags Details
Patch (3.91 KB, patch)
2015-03-30 20:59 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff
Patch (3.94 KB, patch)
2015-03-31 21:27 PDT, Nikita Vasilyev
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Joseph Pecoraro 2015-02-26 18:30:56 PST
* 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.
Comment 1 Radar WebKit Bug Importer 2015-02-26 18:31:24 PST
<rdar://problem/19980232>
Comment 2 Joseph Pecoraro 2015-03-27 12:12:06 PDT
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.
Comment 3 Joseph Pecoraro 2015-03-28 01:09:12 PDT
(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.
Comment 4 Nikita Vasilyev 2015-03-29 23:46:51 PDT
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?
Comment 5 Timothy Hatcher 2015-03-30 08:38:44 PDT
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/
Comment 6 Nikita Vasilyev 2015-03-30 20:52:31 PDT
Created attachment 249793 [details]
[Image] Before/After
Comment 7 Nikita Vasilyev 2015-03-30 20:59:07 PDT
Created attachment 249794 [details]
Patch
Comment 8 Nikita Vasilyev 2015-03-30 21:05:32 PDT
(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.
Comment 9 Timothy Hatcher 2015-03-31 10:10:56 PDT
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?
Comment 10 Nikita Vasilyev 2015-03-31 21:27:23 PDT
Created attachment 249886 [details]
Patch

Added "margin-right: 2px" to keep the current look.
Comment 11 WebKit Commit Bot 2015-03-31 23:17:37 PDT
Comment on attachment 249886 [details]
Patch

Clearing flags on attachment: 249886

Committed r182221: <http://trac.webkit.org/changeset/182221>
Comment 12 WebKit Commit Bot 2015-03-31 23:17:41 PDT
All reviewed patches have been landed.  Closing bug.
Comment 13 Joseph Pecoraro 2015-04-04 11:11:16 PDT
(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).
Comment 14 Joseph Pecoraro 2015-04-04 11:12:12 PDT
(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.