Closed Bug 704110 Opened 8 years ago Closed 7 years ago

The WebConsole should use the DevTools CSS theme (dark theme)

Categories

(DevTools :: Console, defect, P3)

defect

Tracking

(Not tracked)

RESOLVED WONTFIX

People

(Reporter: paul, Assigned: paul)

References

(Blocks 1 open bug)

Details

(Whiteboard: [pink])

Attachments

(5 files, 15 obsolete files)

1.11 MB, image/png
Details
121.74 KB, image/png
Details
15.36 KB, patch
Details | Diff | Splinter Review
35.89 KB, patch
Details | Diff | Splinter Review
328.14 KB, image/png
Details
The WebConsole should look like the Inspector toolbar.
(In reply to Paul Rouget [:paul] from comment #0)
> The WebConsole should look like the Inspector toolbar.

Do we have a target milestone for this? Has this been discussed somewhere?
Attached image Current look (screenshot) (obsolete) —
Attached image Dark theme (screenshot) (obsolete) —
Attachment #575845 - Attachment description: Current look → Current look (screenshot)
Attached patch patch v0.1 - WIP (obsolete) — Splinter Review
(In reply to Maniac Vlad Florin (:vladmaniac) from comment #1)
> (In reply to Paul Rouget [:paul] from comment #0)
> > The WebConsole should look like the Inspector toolbar.
> Do we have a target milestone for this? Has this been discussed somewhere?

No
Comments about the dark theme:
Component: Developer Tools → Developer Tools: Console
QA Contact: developer.tools → developer.tools.console
(In reply to Paul Rouget [:paul] from comment #5)
> (In reply to Maniac Vlad Florin (:vladmaniac) from comment #1)
> > (In reply to Paul Rouget [:paul] from comment #0)
> > > The WebConsole should look like the Inspector toolbar.
> > Do we have a target milestone for this? Has this been discussed somewhere?
> 
> No

Thanks for clarifications. Btw, mockup looks pretty. ++
Comments about the dark theme:
- The timestamp background might be too dark
- It feels like the vertical alignment of a message is not centered
- The Net icon (black square) is not visible
- The CSS icon (blue square) is too close to the blue used for the buttons
Comment on attachment 575846 [details]
Dark theme (screenshot)

Stephen, I think we need to have a dark theme for the WebConsole as well. This is an attempt to use the inspector theme in the WebConsole.

What do you think?
Attachment #575846 - Flags: review?(shorlander)
(In reply to Paul Rouget [:paul] from comment #8)
> Comments about the dark theme:
> - The timestamp background might be too dark
> - It feels like the vertical alignment of a message is not centered
> - The Net icon (black square) is not visible
> - The CSS icon (blue square) is too close to the blue used for the buttons

- We need to fit GCLI into this reskin too.
Comment on attachment 575847 [details] [diff] [review]
patch v0.1 - WIP

This makes the web console depend on browser.css, which is undesirable, since the web console belongs in an iframe :(
Attachment #575847 - Flags: review-
(In reply to Dão Gottwald [:dao] from comment #12)
> Comment on attachment 575847 [details] [diff] [review] [diff] [details] [review]
> patch v0.1 - WIP
> 
> This makes the web console depend on browser.css, which is undesirable,
> since the web console belongs in an iframe :(

This is going to take time (bug 688981).

Also, when bug 703938 will get fixed, we will have a specific CSS file for the console in browser/.
If I move the code in there, that would be ok, right?

Another option would be to create a specific css file for the devtools (with the dark toolbars and buttons) that we would use for the Inspector and the Web Console.

What do you think?
Status: NEW → ASSIGNED
Duplicate of this bug: 703695
Comment on attachment 575846 [details]
Dark theme (screenshot)

One thing I don't like about this proposed screenshot is also a problem with the inspector (on Windows and Linux).

We have our closebutton on the right of the toolbar, which is fine, but when we're resizing, we have our grip on the outer edge.

This feels wrong to me. It indents the close button in a visually-strange way. It also puts the resizer (a convenience widget for resizing) next to the close button. It makes the close button harder to hit well, imo.

We should move the resizer grip to the left here and in the webconsole on Linux and Windows.
Depends on: 708257
Blocks: 708257
No longer depends on: 708257
Attached image mockup webconsole dark theme (obsolete) —
Attached image WIP (screenshot) (obsolete) —
Notes and questions:
- do we want a white on black log?
- what should be the design of the text input (missing in the mockup). Like the command line?
- I think I'll use CSS for the icons in the buttons (radius:50%)
- I need some colors for when a item is select (today it's white on gray)
- I think it could be interesting to get alternate colors for the odd/even lines
- here, we don't show any icon (see attachment 575846 [details] to see the "warning" icon)
Attached patch patch v0.2 - WIP (linux only) (obsolete) — Splinter Review
Depends on: 718431
This screenshot show a couple of things that need to be designed.
Each line can be:
- a log, or
- a warning, or
- an error

Each line can have a repeat count.

I don't know how to show this information correctly. In Firefox Aurora (broken in Nightly) we can see little warning icons, but they are not really convincing.
Attached patch patch v0.3 - WIP (obsolete) — Splinter Review
Attachment #588712 - Attachment is obsolete: true
Todo:
-
Todo:
- nth-child(odd) doesn't work if logs are filtered.
Attached image screenshot - light theme (obsolete) —
Attached image screenshot - dark theme (obsolete) —
In this new version of the patch, I introduce a pref:
devtools.darkcolorscheme, false by default.

devtools.darkcolorscheme=false screenshot: attachment 589165 [details]
devtools.darkcolorscheme=true  screenshot: attachment 589166 [details]
Todo: the autocompletion placeholder is not visible in the dark version
Questions for UX:
- should we go for a dark theme by default or a light one?
- each line can have a repeat-count (the red label we have today), a WARN label or a ERROR label. I don't know what is the best way to show that.
- what should be the design of the text input (missing in the mockup). Like the command line?

Todo for me:
- the autocompletion placeholder is not visible in the dark version
- multiselection are not visible
Duplicate of this bug: consoleui
Attachment #575846 - Attachment is obsolete: true
Attachment #575846 - Flags: review?(shorlander)
Attachment #575847 - Attachment is obsolete: true
Attachment #575861 - Attachment is obsolete: true
Attachment #588662 - Attachment is obsolete: true
Attachment #588711 - Attachment is obsolete: true
Attachment #588911 - Attachment is obsolete: true
Attachment #588919 - Attachment is obsolete: true
Attachment #589165 - Attachment is obsolete: true
Attachment #589166 - Attachment is obsolete: true
Attached image mockup - final
Thank you Stephen for the mockup.

Questions:
- can I get the icons? Error, Warning, arrow-left, arrow-right (arrows are not in the design. It's for console.log and its output)
- can I get the actual colors values? (for Windows and Mac. I will use the Mac values for Linux)
Blocks: 722267
Blocks: 723819
Another question:
- can we get another color for the JS logs? Orange usually means "warning".
Depends on: 635359
Whiteboard: [pink]
Test with pink: http://i.imgur.com/xjouc.png
Attached image screenshot (to review)
I am trying to get as close as possible to the original mockup (attachment 591872 [details]).

Notes:
- I changed orange to pink. Not sure about that though :)
- I am not sure to get the colors right.
- the line-height of the logs might be too big.
- I use ">" and "↳" for the input and output logs.
- I created my own dropmarker for the button. Does it look ok?
- The timestamps look less glossy than in the mockup. Why?
- I keep the original ">" icon for the input bar. Is that ok?
- The toolbar is thinner in the mockup. In my implementation, I use the same size as the Inspector Toolbar. Is that wrong?
Attachment #575845 - Attachment is obsolete: true
Attachment #594746 - Flags: review?(shorlander)
Todo:
- address future comments
- the colored circle are not clickable
- the zebra doesn't work correctly if the content is filtered
- use icons instead of UTF8 chareacters
one suggestion to try out (maybe not here), moving the repeat bubbles into the left area with the timestamps or in a separate field. That could keep text justified and make the bubbles have their own space. I find the current mockups a little jumbled.
(In reply to Rob Campbell [:rc] (robcee) from comment #36)
> one suggestion to try out (maybe not here), moving the repeat bubbles into
> the left area with the timestamps or in a separate field. That could keep
> text justified and make the bubbles have their own space. I find the current
> mockups a little jumbled.

Paul and I discussed that and I think that would work. The only consideration there is that you are pushing the more relevant information (messages) farther right for a column that is only useful sometimes. 

It also has the potential to grow wider as the number gets larger so it would need some kind of sane cutoff like [9999+] or [999…] or something else.
Todo:
- address future comments
- the colored circle are not clickable
- the zebra doesn't work correctly if the content is filtered
- use icons instead of UTF8 chareacters
- Pinstripe and Winstripe
rebased 0.4. Did not mark the original as obsolete in case I missed anything. Interdiffs look reasonable.
A slightly busted version of the gnomestripe theme ported into pinstripe. Missing close button, funny button sizes. See screenshot.
Attached image mac wip screenshot (obsolete) —
(In reply to Rob Campbell [:rc] (robcee) from comment #42)
> Created attachment 599158 [details]
> mac wip screenshot

Nice.
Can we get rid of the brackets around the timestamp tho? Looks like unnecessary noise IMHO.
Attachment #589167 - Attachment is obsolete: true
Attachment #599136 - Attachment is obsolete: true
Attachment #599157 - Attachment is obsolete: true
Attachment #599158 - Attachment is obsolete: true
I have split the patch in 2: common and webconsole.
common can be used to style the debugger.
v0.6 implements the style for pinstripe too.
Attached image mac screenshot
Depends on: 749626
Depends on: 688981
Attachment #594746 - Flags: review?(shorlander)
Please incorporate changes from bug 635359 into this.
Blocks: 635359
No longer depends on: 635359
let's do that in 2 steps. Toolbar then content. Starting with the toolbar: bug 777011.
After landing bug 777011, webconsole toolbar is changed to dark theme, but popup & result list are not changed to it.
Does this bug aims to change them?
(In reply to OHZEKI Tetsuharu [:saneyuki_s] from comment #51)
> After landing bug 777011, webconsole toolbar is changed to dark theme, but
> popup & result list are not changed to it.
> Does this bug aims to change them?

Bug 777011 was indeed only about the toolbar.
We are not sure yet what should be done for the rest of the UI (but, for sure, it needs a re-styling).
triage: filter on TARDIS
Depends on: console-output
Priority: -- → P3
We have decided to NOT use a dark skin for tools content. Since we have updated the toolbar and don't have a mockup/plans for this, I'm tempted to WONTFIX this. We can always file a new bug once we know what we want to do here. Feel free to reopen if you don't agree.
Status: ASSIGNED → RESOLVED
Closed: 7 years ago
Resolution: --- → WONTFIX
My recollection is that we agreed to use a dark theme as the default, but not until we have a proper toggle in place for users who prefer a light theme (bug 796011).
(In reply to Panos Astithas [:past] from comment #55)
> My recollection is that we agreed to use a dark theme as the default, but
> not until we have a proper toggle in place for users who prefer a light
> theme (bug 796011).

I think we don't have any concrete plan for now. No mockups for light theme, no theme-switching mechanism has ever been investigated, we don't even know who can/will work on this, … and some disagreements :) This is confusing.

I suggest that we come-up with a realistic plan, and we file bugs according.
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.