Closed Bug 1307929 Opened 3 years ago Closed 2 years ago

Photon updates for new webconsole UI

Categories

(DevTools :: Console, enhancement, P1)

enhancement

Tracking

(firefox57 verified)

VERIFIED FIXED
Firefox 57
Iteration:
57.3 - Sep 19
Tracking Status
firefox57 --- verified

People

(Reporter: linclark, Assigned: nchevobbe)

References

(Blocks 1 open bug)

Details

(Whiteboard: [reserve-console-html])

Attachments

(2 files)

Originally posted by:jnachtigall

see https://github.com/devtools-html/gecko-dev/issues/350

Dupe of https://bugzilla.mozilla.org/show_bug.cgi?id=879310 I would like to raise awareness about. 

I think the line items would be much easier to read if they had alternating background colors like usually done for table rows with CSS `:nth-child(even)` or `:nth-child(odd)`. Especially if you have line items that stretch more than one line (which happens often when the devtools are attached at the right side and not at bottom).
Priority: -- → P2
Whiteboard: new-console
Adding here a comment from Nicolas left on github (and updating summary):
===================================================

I don't really think zebra would be something we want for this, as it would be too "loud". But we can definitely experiments with things that would improve the readibility ( like more vertical padding around the message, separation lines on each message, ... ).
That's a job for @helenvholmes 
Summary: Individual line items hard to differentiate → UI / design refresh for new webconsole
Flags: qe-verify+
Priority: P2 → P3
QA Contact: iulia.cristescu
Whiteboard: new-console → [reserve-new-console]
Whiteboard: [reserve-new-console] → [reserve-console-html]
I've just hit this again when *not* seeing failed CORs. See attached screenshot. At least I think that the warning icon should be red so that it is better visible especially if CSS and XHR filters are enabled, then it's too much grey in grey and lines hard to differentiate.

When doing a re-coloring here, please also have a look at the Google Console which has a nice color appeal for specific lines and different log levels. So Error, Warning, Info lines have different color making it really nice. 

I guess there's many more 'tail' or logging like software out there to get inspired from about how to do the colors. Still room to improve :)
Summary: UI / design refresh for new webconsole → Photon updates for new webconsole UI
See Also: → 1390008
Assignee: nobody → nchevobbe
Status: NEW → ASSIGNED
Priority: P3 → P1
Iteration: --- → 57.3 - Sep 19
Depends on: 1399460
Blocks: 1390008
Comment on attachment 8907995 [details]
Bug 1307929 - Photon updates for new webconsole UI; .

https://reviewboard.mozilla.org/r/179670/#review184958

::: devtools/client/themes/webconsole.css:725
(Diff revision 2)
>    -moz-user-focus: normal;
> +  color: var(--console-output-color);
> +  --console-output-indent-width: 1rem;
> +  --console-output-indent-border-color: #A2D1FF;
> +}
> +/* Webconsole specific theme variables */

Needs a new line to separate the rules
Attachment #8907995 - Flags: review?(gl) → review+
Comment on attachment 8907995 [details]
Bug 1307929 - Photon updates for new webconsole UI; .

https://reviewboard.mozilla.org/r/179670/#review184982

R+ from me but some feedback.

1) Errors have the same red color as standard logs. I think that errors should be easily distnguishable from logs, so it isn't easy to overlook them. Isn't red color being de facto standared for errors? 
2) CSS errors are not red.
3) Errors in the dark theme are not red (while standard logs are).

Otherwise, I really like how the UI has been refreshed and how it looks now!

Honza
Attachment #8907995 - Flags: review?(odvarko) → review+
(In reply to Jan Honza Odvarko [:Honza] from comment #7)
> Comment on attachment 8907995 [details]
> Bug 1307929 - Photon updates for new webconsole UI; .
> 
> https://reviewboard.mozilla.org/r/179670/#review184982
> 
> R+ from me but some feedback.
> 
> 1) Errors have the same red color as standard logs. I think that errors
> should be easily distnguishable from logs, so it isn't easy to overlook
> them. Isn't red color being de facto standared for errors? 
> 2) CSS errors are not red.
> 3) Errors in the dark theme are not red (while standard logs are).
> 
> Otherwise, I really like how the UI has been refreshed and how it looks now!
> 
> Honza
To be clear, my feedback is more for designers behind
the photon colors, not so much for Nicolas ;-)

Honza
Pushed by nchevobbe@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/ea1956ea8a50
Photon updates for new webconsole UI; r=gl,Honza.
https://hg.mozilla.org/mozilla-central/rev/ea1956ea8a50
Status: ASSIGNED → RESOLVED
Closed: 2 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 57
Investigated this issue on 57.0b3 build 1 (20170925150345), using Windows 10 x64, Ubuntu 16.04 x64 and Mac OS X 10.11.6. I noticed some inconsistencies between the spec doc details provided in comment 3 and the font colors and some symbols (e.g. Errors) used in the above mentioned 57 build for Errors, Warnings, CSS, XHR and Requests. See here the screenshots for each case https://goo.gl/i8wGKL.
Flags: needinfo?(nchevobbe)
Hello Iulia,

We tweaked the design a bit while doing this work, that's why you see differences.
I went through your screenshots and everything seems good to me :)

Thanks !
Flags: needinfo?(nchevobbe)
Thanks you Nicolas for your reply! 
Based on comment 13 and comment 14, I will mark this as verified fixed.
Status: RESOLVED → VERIFIED
Flags: qe-verify+
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.