1495724 - Add a border around multi-line console logs

Status: RESOLVED DUPLICATE of bug 1519904

(DevTools :: Console, enhancement, P3)

Description

[Jens]

Attachment: mulit-line log

See attached screenshot. When there are multiline logs, then it is hard to see where an item starts and where it ends. Chrome adds a tiny border around each item. I think at least for multi-line log items, it would be worth doing the same.

The attached example is just 4 console.log(string, obj, obj, obj) spreading over several lines and it is hard to tell at first glance where each console.log() starts/ends.

Comment 1

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

I agree with that and I think we had a discussion about every item/log having bottom border.

@Matt: what do you think about this?

Honza

Comment 2

[mcroud]

Apologies for the late response! 
Yes absolutely, in the screenshot provided my eyes are constantly darting toward the arrows in the left hand column to try and make sense of it. Some form of visual indicator would certainly be beneficial for users.

Early thoughts are that which ever mechanism we chose it may need to be consistent regardless of whether it is a single or multi-lined console log. Otherwise you would still need to look at the arrows in the left to determine whether you are looking at a single multi-line message, or perhaps two single messages between two multi-line messages:

---------------------
Multi-line
Multi-line
---------------------
Single line
Single line
---------------------
Multiline
Multiline
---------------------

I have added it to the DevTools UX backlog

Comment 3

[mcroud]

Attachment: Row-borders-exploration.png

Updating this bug with the current progress on the Github Issue: https://github.com/devtools-html/ux/issues/42

fvsch is working on this and is currently exploring how console row borders should look for various message types.
I have attached one of their exploratory mockups for reference.

Comment 4

[Nicolas Chevobbe [:nchevobbe]]

Let's close this in favor of Bug 1519904 which as a WIP patch attached to it.