1463671 - Improve the UI for Evaluated input and Evaluated result in the console output

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[Nicolas Chevobbe [:nchevobbe]]

At the moment we don't do much to "link" an evaluated input and its result in the output:

> ≫ [1, 2, 3][0]
> <- 1

It would be nice to find a way to bind those together in a more obvious way.

We also should be aware that sometimes there can be message between the input and its result (e.g., if you evaluate a console.log, or later, when we'll have top-level await evaluation support) - but that's something we could change to always have the input and its result on top of each other.

Comment 1

[Florens Verschelde :fvsch]

The logged message coming between console.log and the `undefined` return value is per the spec:
https://console.spec.whatwg.org/#supporting-ops

Comment 2

[Florens Verschelde :fvsch]

Attachment: Screenshot of Chrome devtools console

Chrome manages this by not putting a border between input and result:

--------------------
> 'foo'
< foo
--------------------

But this behavior becomes murky when using console.log, because then there will be a border:

--------------------
> console.log('foo')
--------------------
  foo
--------------------
< undefined
--------------------

Comment 3

[Florens Verschelde :fvsch]

Attachment: console-inputoutput-relation-test-indentation.png

One way to show the input/output relationship is indentation.
Quick mockup. I don’t like it much, because indentation is already used for collapsible content, and if you end up combining different types of indentation it looks chaotic.

Comment 4

[Florens Verschelde :fvsch]

Attachment: console-inputoutput-relation-test-border.png

Another option, which I like better, would be to reuse the existing left border that appears on hover. Right now I don’t think it has any specific purpose (but I may be missing it).

My proposed change would be to make the border span the full series of related rows. This hint would only appear on :hover (though :focus-within could be added too).

Comment 5

[mcroud]

Attachment: Further console grouping suggestions

Comment 6

[Nicolas Chevobbe [:nchevobbe]]

Thanks a lot Florens and Matthew.

I like the idea of connections !
One thing we might need to handle is what happens with top-level await.

So let's say you do this:

-> await sleep(1000)

where sleep is a function that logs for how long it will sleep, returns a promise which resolves after the number of ms we pass to it, and resolves with "yo".

So if there's no competing log, we should have

· 10:00:00 -> await sleep(1000)
|
· 10:00:00    Going to sleep for 1000 ms
|
· 10:00:01 <- yo


Now, let's say there's an error, or a log coming from the content page

· 10:00:00 -> await sleep(5000)
|
· 10:00:00    Going to sleep for 5000 ms

  10:00:02 ❌ An error happened in the page.
|
· 10:00:05 <- yo



The log from 10:00:02 should be associated with the other ones.

Also, another thing to consider is that I don't really think we have a way to know (currently) if a given console.log originates from a console evaluation. This is probably doable, but might require some work.

Comment 7

[Florens Verschelde :fvsch]

Re. Matt’s suggestions, I like (D) best, but I have two concerns.

The smaller one is that right-pointing triangles are already used for collapsible sections, but using something else or making sure there’s no confusion should be easy.

The bigger one, having worked on bug 1479750 which deals with the Console's left gutter, alignement and icons, is that there is already a lot going on in the Console's left gutter. And some lines already have a kind of linking line, e.g. when using console.group:

    console.group('Foo');
    console.log('Bar');
    console.groupEnd();


> The log from 10:00:02 should be associated with the other ones.

Looks like the main issue here is that the Console logs are ordered by timestamp, and what we are exploring in this bug is grouping thing that "belong together" regardless of when they happen. Both needs conflict, and a continuous visual symbol is impossible unless we break the timeline.

This leaves us 3 options IMO:
1. Drop the idea altogether.
2. Use a non-continuous way to highlight relations. For instance, think of bracket and parenthesis highlighting in code editors. When hovering one line in the Console, all the related lines could be highlighted.
3. Use a continuous visual symbol, but only in simple cases like input->output and input->log->output. Async cases will leave orphans behind, which can be acceptable if they’re rare enough.

Comment 8

[Florens Verschelde :fvsch]

Attachment: Mockup: basic console input-output linking

Another try with a more basic visual link, reusing the indent line style from console groups. Not convinced, I find it visually busy and confusing.

Still attaching because it shows some of the styles from bug 1479750 and an example of console groups.