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

Status: RESOLVED WONTFIX

(DevTools :: Console, defect, P3)

Description

[Paul Rouget [:paul]]

The WebConsole should look like the Inspector toolbar.

Comment 1

[Maniac Vlad Florin (:vladmaniac)]

(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?

Comment 2

[Paul Rouget [:paul]]

Attachment: Current look (screenshot)

Comment 3

[Paul Rouget [:paul]]

Attachment: Dark theme (screenshot)

Comment 4

[Paul Rouget [:paul]]

Attachment: patch v0.1 - WIP

Comment 5

[Paul Rouget [:paul]]

(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

Comment 6

[Paul Rouget [:paul]]

Comments about the dark theme:

Comment 7

[Maniac Vlad Florin (:vladmaniac)]

(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. ++

Comment 8

[Paul Rouget [:paul]]

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 9

[Paul Rouget [:paul]]

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?

Comment 10

[Paul Rouget [:paul]]

Attachment: (optional) replace the splitter with a resizer - patch v0.1 WIP

Comment 11

[Joe Walker [:jwalker]]

(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 12

[Dão Gottwald [:dao]]

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 :(

Comment 13

[Paul Rouget [:paul]]

(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?

Comment 15

[Rob Campbell [:rc] (:robcee)]

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.

Comment 16

[Paul Rouget [:paul]]

Attachment: mockup webconsole dark theme

Comment 17

[Paul Rouget [:paul]]

Attachment: WIP (screenshot)

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)

Comment 18

[Paul Rouget [:paul]]

Attachment: patch v0.2 - WIP (linux only)

Comment 19

[Paul Rouget [:paul]]

Attachment: screenshot <- need idea/design for warning, errors and repeat

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.

Comment 20

[Paul Rouget [:paul]]

Attachment: patch v0.3 - WIP

Comment 21

[Paul Rouget [:paul]]

Todo:
-

Comment 22

[Paul Rouget [:paul]]

Todo:
- nth-child(odd) doesn't work if logs are filtered.

Comment 23

[Paul Rouget [:paul]]

Attachment: screenshot - light theme

Comment 24

[Paul Rouget [:paul]]

Attachment: screenshot - dark theme

Comment 25

[Paul Rouget [:paul]]

Attachment: patch v0.4 - darkcolorscheme option

Comment 26

[Paul Rouget [:paul]]

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]

Comment 27

[Paul Rouget [:paul]]

Todo: the autocompletion placeholder is not visible in the dark version

Comment 28

[Paul Rouget [:paul]]

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

Comment 30

[Paul Rouget [:paul]]

Attachment: mockup - final

Comment 31

[Paul Rouget [:paul]]

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)

Comment 32

[Paul Rouget [:paul]]

Another question:
- can we get another color for the JS logs? Orange usually means "warning".

Comment 33

[Paul Rouget [:paul]]

Test with pink: http://i.imgur.com/xjouc.png

Comment 34

[Paul Rouget [:paul]]

Attachment: 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?

Comment 35

[Paul Rouget [:paul]]

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

Comment 36

[Rob Campbell [:rc] (:robcee)]

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.

Comment 37

[Stephen Horlander [:shorlander]]

(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.

Comment 38

[Paul Rouget [:paul]]

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

Comment 39

[Rob Campbell [:rc] (:robcee)]

Attachment: patch v0.4 - darkcolorscheme option - rebased

Comment 40

[Rob Campbell [:rc] (:robcee)]

rebased 0.4. Did not mark the original as obsolete in case I missed anything. Interdiffs look reasonable.

Comment 41

[Rob Campbell [:rc] (:robcee)]

Attachment: patch v0.5 - darkcolorscheme, pinstripe WIP

A slightly busted version of the gnomestripe theme ported into pinstripe. Missing close button, funny button sizes. See screenshot.

Comment 42

[Rob Campbell [:rc] (:robcee)]

Attachment: mac wip screenshot

Comment 43

[Cedric Vivier [:cedricv]]

(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.

Comment 44

[Paul Rouget [:paul]]

Attachment: patch v0.6 - common

Comment 45

[Paul Rouget [:paul]]

Attachment: patch v0.6 - webconsole

Comment 46

[Paul Rouget [:paul]]

I have split the patch in 2: common and webconsole.
common can be used to style the debugger.

Comment 47

[Paul Rouget [:paul]]

v0.6 implements the style for pinstripe too.

Comment 48

[Paul Rouget [:paul]]

Attachment: mac screenshot

Comment 49

[Rob Campbell [:rc] (:robcee)]

Please incorporate changes from bug 635359 into this.

Comment 50

[Paul Rouget [:paul]]

let's do that in 2 steps. Toolbar then content. Starting with the toolbar: bug 777011.

Comment 51

[Tetsuharu OHZEKI [:tetsuharu] (UTC+9)]

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?

Comment 52

[Paul Rouget [:paul]]

(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).

Comment 53

[Mihai Sucan [:msucan]]

triage: filter on TARDIS

Comment 54

[Paul Rouget [:paul]]

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.

Comment 55

[Panos Astithas (he/him) [:past] (please ni?)]

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).

Comment 56

[Paul Rouget [:paul]]

(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.