1502294 - Show timestamp on top of message when console is narrow

Status: NEW

(DevTools :: Console, enhancement, P3)

Description

[alex.kasselman]

User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0

Steps to reproduce:

I started with website bug testing and was asked to enable timestamps.
Time stamp was enable and the moment I docked my developer tools from the bottom to the right side the time stamps disappeared. 


Actual results:

developer tool was move to the right had side of screen and time stamps was missing until l mad the developer tab bigger


Expected results:

Time stamps to be enable even if develop bar is not full size

Comment 1

[Rares Doghi, Desktop QA]

Hi, This issue can be reproduced in all version of Firefox, ill set the component to Framework but I'm not sure if its a Console issue or a Framework issue, please change the component if there is a more suitable one for it.

Comment 2

[Patrick Brosset <:pbro>]

Thanks for filing, I believe this is a console bug.
When I make the console sufficiently narrow, then the timestamp column disappears. I appears again if I make the console wider.
Maybe that's on purpose, to save space, or maybe timestamps should appear on a separate line when needed.

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

yes, that's genuine, there's a media query to not show the timestamp when the window is too narrow.
Having them displayed before the message might make more sense.

Comment 4

[enriquealc27]

Hi, this looks like an issue I could pick up. Is it available?

Comment 5

[Nicolas Chevobbe [:nchevobbe]]

(In reply to enriquealc27 from comment #4)
> Hi, this looks like an issue I could pick up. Is it available?

Hello!
Yes, it is still available, I will assign it to you :) Thanks for helping!

If it's your first time working on Firefox (or DevTools), you might want to have a look at https://docs.firefox-dev.tools/getting-started/ 
You might also need to enable the Browser Toolbox (https://developer.mozilla.org/en-US/docs/Tools/Browser_Toolbox) in order to inspect the console :) 

You can come chat with us in our Slack if you want to too: https://devtools-html-slack.herokuapp.com/

Comment 6

[enriquealc27]

Thanks! I really appreciate your guidance. I'll pick it up tonight and will join the slack group.

Comment 7

[Nicolas Chevobbe [:nchevobbe]]

Hello Enrique.

Do you still plan to work on this? It's totally okay if you don't :)

Comment 8

[enriquealc27]

Nicolas, I’m really embarrassed for not being responsible enough and tackle this issue timely. I would like another chance and I promise I’ll work this week on it. I really want to work on it.

Comment 9

[Nicolas Chevobbe [:nchevobbe]]

No worries at all Enrique! That's already awesome you want to help us. I only wanted to check everything was okay. Take your time, this is not a critical bug. And if you don't have the time in the end, don't feel embarrassed!

Have a nice week :)

Comment 10

[enriquealc27]

Attachment: Bug 1502294 - Remove media query that hides console message timestamp

Remove media query that hides the dev-tools console message's timestamp when the dev-tools viewport width is less than 500px.

Comment 11

[Nicolas Chevobbe [:nchevobbe]]

Victoria, Florens, I'd love to hear your input on this.

More specifically, things get pretty weird when we have a narrow width, the timestamp + console.group (and now, warning groups as well).

Comment 12

[Victoria Wang [:victoria]]

By weirdness, are you referring to how the timestamp disappears, or is there a different problem? I do like the idea of showing the timestamp before the message at small widths.

Comment 13

[Florens Verschelde :fvsch]

One open question is whether we want to use a special layout for the "timestamps + narrow width" combined state, or a more generic "narrow width" layout that works with or without timestamps. The second one (narrow width layout) would be best IMO, because it's more realistic to maintain. If we do something very specific to timestamps+narrow, chances are we will break it in future updates and the bug reports will be slow to come up. (It's also a lot of effort for a rare use case.)

I can think of two possible layouts that may help:

1. Timestamp and source on first line

No timestamp:

----------------------------------------
                           manifest.json
⚠️ The extension "React Developer Tools"
  is not allowed to access about:newtab
----------------------------------------

With timestamp:

----------------------------------------
09:40:49.881               manifest.json
⚠️ The extension "React Developer Tools"
  is not allowed to access about:newtab
----------------------------------------

Inside groups, it might end up looking like like:

----------------------------------------
   | 09:40:49.881          manifest.json
   | ⚠️ The extension "React Developer
   |   Tools" is not allowed to access
   |   about:newtab
----------------------------------------

(Keeping the timestamp in the left gutter would require using a different HTML structure for this case than the one used for the non-indented case, which is impractical. So we have to end up with unaligned timestamps. We could also hide the timestamps altogether inside groups; in my experience groups tend to be short-lived and created by code that uses groups as a kind of custom "see more info" mechanism, logged in one burst.)

Implementation: this would require changing the DOM structure on narrow widths (or when docked to the side maybe). And I think the changes would be substantial unless we decide to use CSS Grid to fit everything in different grid cells (but having each row be a grid could create perf issues I believe?).

2. Push source to a new line to reclaim some space

No timestamp:

----------------------------------------
⚠️ The extension "React Developer Tools"
  is not allowed to access about:newtab
                           manifest.json
----------------------------------------

With timestamp:

----------------------------------------
09:40:49.881  ⚠️ The extension "React
                Developer Tools" is not
                allowed to access
                about:newtab
                           manifest.json
----------------------------------------

Inside a group:

----------------------------------------
09:40:49.881 | ⚠️ The extension "React
             | Developer Tools" is not
             | allowed to access
             | about:newtab
             |             manifest.json
----------------------------------------

Implementation: this second layout tweak seems much easier to implement, at least in the general log case we can probably do it just by changing the message+source container's flex-direction to column and tweak some Flexbox styles. Network requests might need a bit more work but that looks doable.

PS: both styles require borders between messages so that it's clear which message the timestamp and/or source is related to.

Comment 14

[Victoria Wang [:victoria]]

Thanks Florens for these detailed suggestions. Option 1 looks great! Seems worth it to give the message enough width to be easily readable.

If that DOM structure change is too much for now, I'm curious if it would make sense to put everything in a wrapping line, with the idea that punctuation and color changes provide enough differentiation.

---

09:40:49.881 | ⚠️ The extension "React
Developer Tools" is not allowed to
access about:newtab (manifest.json:22:1)

Comment 15

[Patrick Brosset <:pbro>]

No activity for 5 months, unassigning this bug for now. Feel free to claim it again when/if you want to work on it again. In the meantime let's open it up to other people.

Comment 16

[aarushivij]

Hello , I was trying to enable timestamps in devtools settings but couldn't find enable timestamp option.
How can I reproduce this issue?
Also I want to work on it!
Thank you
Aarushi

Comment 17

[Florens Verschelde :fvsch]

Attachment: Console preferences menu

At least in Nightly, all Console preferences have been moved to a menu inside the Console panel itself. Look for the cogwheel icon at the end of the toolbar in Console.

Comment 18

[aarushivij]

Reproduced the issue
Can I work on it?
Also how should be the layout be as mentioned in comment13
Thanks
Aarushi

Comment 19

[Nicolas Chevobbe [:nchevobbe]]

Sure aarushivij, I assigned it to you.

For the layout, let's try what Florens had under 1. .
We should probably look into CSS grid to lay down the messages, so we can have 2 different layouts (narrow and wide).
In order to switch from wide to narrow layout, we could use a ResizeObserver, like we already did for the filter bar (devtools/client/webconsole/components/FilterBar/FilterBar.js#89). We could have it at the ConsoleOutput level, and make the switch at a given width. (we can't use media query, because the output width can be impacted by the editor mode and the sidebar).

Let us know how this goes!

Comment 20

[aarushivij]

Thanks for assigning.
Shall start working on it :)

Comment 21

[aarushivij]

Attachment: Bug 1502294 - Show timestamp on top of message when console is narrow. r=nchevobbe

Comment 23

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee didn't login in Bugzilla in the last 7 months.
:nchevobbe, could you have a look please?
For more information, please visit auto_nag documentation.

Comment 24

[Nicolas Chevobbe [:nchevobbe]]

Sasha, should we assign this bug to you ?