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

RESOLVED WONTFIX

Status

P3
normal
RESOLVED WONTFIX
7 years ago
6 months ago

People

(Reporter: paul, Assigned: paul)

Tracking

(Blocks: 1 bug)

Trunk
Dependency tree / graph

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [pink])

Attachments

(5 attachments, 15 obsolete attachments)

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

Description

7 years ago
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?
(Assignee)

Comment 2

7 years ago
Created attachment 575845 [details]
Current look (screenshot)
(Assignee)

Comment 3

7 years ago
Created attachment 575846 [details]
Dark theme (screenshot)
(Assignee)

Updated

7 years ago
Attachment #575845 - Attachment description: Current look → Current look (screenshot)
(Assignee)

Comment 4

7 years ago
Created attachment 575847 [details] [diff] [review]
patch v0.1 - WIP
(Assignee)

Comment 5

7 years ago
(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
(Assignee)

Comment 6

7 years ago
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. ++
(Assignee)

Comment 8

7 years ago
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
(Assignee)

Comment 9

7 years ago
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)
(Assignee)

Comment 10

7 years ago
Created attachment 575861 [details] [diff] [review]
(optional) replace the splitter with a resizer - patch v0.1 WIP
(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-
(Assignee)

Comment 13

7 years ago
(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?
(Assignee)

Updated

7 years ago
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.
(Assignee)

Updated

7 years ago
Depends on: 708257
Blocks: 708257
No longer depends on: 708257
(Assignee)

Comment 16

7 years ago
Created attachment 588662 [details]
mockup webconsole dark theme
(Assignee)

Comment 17

7 years ago
Created attachment 588711 [details]
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)
(Assignee)

Comment 18

7 years ago
Created attachment 588712 [details] [diff] [review]
patch v0.2 - WIP (linux only)
(Assignee)

Updated

7 years ago
Depends on: 718431
(Assignee)

Comment 19

7 years ago
Created attachment 588911 [details]
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.
(Assignee)

Comment 20

7 years ago
Created attachment 588919 [details] [diff] [review]
patch v0.3 - WIP
(Assignee)

Updated

7 years ago
Attachment #588712 - Attachment is obsolete: true
(Assignee)

Comment 21

7 years ago
Todo:
-
(Assignee)

Comment 22

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

Comment 23

7 years ago
Created attachment 589165 [details]
screenshot - light theme
(Assignee)

Comment 24

7 years ago
Created attachment 589166 [details]
screenshot - dark theme
(Assignee)

Comment 25

7 years ago
Created attachment 589167 [details] [diff] [review]
patch v0.4 - darkcolorscheme option
(Assignee)

Comment 26

7 years ago
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]
(Assignee)

Comment 27

7 years ago
Todo: the autocompletion placeholder is not visible in the dark version
(Assignee)

Comment 28

7 years ago
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
(Assignee)

Updated

7 years ago
Duplicate of this bug: 559481
(Assignee)

Updated

7 years ago
Attachment #575846 - Attachment is obsolete: true
Attachment #575846 - Flags: review?(shorlander)
(Assignee)

Updated

7 years ago
Attachment #575847 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #575861 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #588662 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #588711 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #588911 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #588919 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #589165 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #589166 - Attachment is obsolete: true
(Assignee)

Comment 30

7 years ago
Created attachment 591872 [details]
mockup - final
(Assignee)

Comment 31

7 years ago
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)
(Assignee)

Updated

7 years ago
Blocks: 722267
(Assignee)

Updated

7 years ago
Blocks: 723819
(Assignee)

Comment 32

7 years ago
Another question:
- can we get another color for the JS logs? Orange usually means "warning".
(Assignee)

Updated

7 years ago
Depends on: 635359
Whiteboard: [pink]
(Assignee)

Comment 33

7 years ago
Test with pink: http://i.imgur.com/xjouc.png
(Assignee)

Comment 34

7 years ago
Created attachment 594746 [details]
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)
(Assignee)

Comment 35

7 years ago
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.
(Assignee)

Comment 38

7 years ago
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
Created attachment 599136 [details] [diff] [review]
patch v0.4 - darkcolorscheme option - rebased
rebased 0.4. Did not mark the original as obsolete in case I missed anything. Interdiffs look reasonable.
Created attachment 599157 [details] [diff] [review]
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.
Created attachment 599158 [details]
mac wip screenshot
(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.
(Assignee)

Comment 44

7 years ago
Created attachment 600413 [details] [diff] [review]
patch v0.6 - common
(Assignee)

Comment 45

7 years ago
Created attachment 600414 [details] [diff] [review]
patch v0.6 - webconsole
(Assignee)

Updated

7 years ago
Attachment #589167 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #599136 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #599157 - Attachment is obsolete: true
(Assignee)

Updated

7 years ago
Attachment #599158 - Attachment is obsolete: true
(Assignee)

Comment 46

7 years ago
I have split the patch in 2: common and webconsole.
common can be used to style the debugger.
(Assignee)

Comment 47

7 years ago
v0.6 implements the style for pinstripe too.
(Assignee)

Comment 48

7 years ago
Created attachment 600416 [details]
mac screenshot
(Assignee)

Updated

7 years ago
Depends on: 749626
(Assignee)

Updated

7 years ago
Depends on: 688981
(Assignee)

Updated

7 years ago
Attachment #594746 - Flags: review?(shorlander)
Please incorporate changes from bug 635359 into this.
Blocks: 635359
No longer depends on: 635359
(Assignee)

Comment 50

7 years ago
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?
(Assignee)

Comment 52

6 years ago
(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: 778766
Priority: -- → P3
(Assignee)

Comment 54

6 years ago
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
Last Resolved: 6 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).
(Assignee)

Comment 56

6 years ago
(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.

Updated

6 months ago
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.