715472 - We need a proper colorscheme for Orion, view-source, the debugger, the Rule/Computed view and the HTML Tree

Status: RESOLVED DUPLICATE of bug 916766

(DevTools :: General, defect, P1)

Description

[Paul Rouget [:paul]]

We need consistency in our color schemes.

Right now, view-source and the HTML Tree don't use the same colors, but both display HTML code.

The Orion editor, for now, is used to display JavaScript code and CSS code. An early colorscheme has been implemented in bug 709006. But it's quite limited.

The color scheme also needs to work properly in a dark chrome as most of the DevTools use a dark-blueish theme.

To open view-source: WebDeveloper Menu -> View Page Source
To open the HTML tree: WebDeveloper Menu -> Inspect -> HTML
To open Orion with Javascript: WebDeveloper Menu -> Scratchpad
To open Orion with CSS: WebDeveloper Menu -> Style Editor

Colors of view-source: http://mxr.mozilla.org/mozilla-central/source/layout/style/viewsource.css
Colors of Orion: http://mxr.mozilla.org/mozilla-central/source/browser/devtools/sourceeditor/orion/mozilla.css
Colors of HTML Tree: http://mxr.mozilla.org/mozilla-central/source/browser/themes/pinstripe/inspector.css (gnomestipe and winstripe too)

Here, we only need the definition of the colors (mockups). Implementations will come in separate bugs.

Comment 1

[Paul Rouget [:paul]]

And we might need an alternative dark-color scheme for Orion.

Comment 2

[Paul Rouget [:paul]]

Screenshost HTML Tree: http://i.imgur.com/6oYJp.png
Screenshot view-source: http://i.imgur.com/FyfFL.png
Screenshot Orion: http://i.imgur.com/jlnwj.png

Comment 3

[Mihai Sucan [:msucan]]

(In reply to Paul Rouget [:paul] from comment #2)
> Screenshost HTML Tree: http://i.imgur.com/6oYJp.png
> Screenshot view-source: http://i.imgur.com/FyfFL.png
> Screenshot Orion: http://i.imgur.com/jlnwj.png

From the three screen shots, I like the view source theme most.

Comment 4

[Paul Rouget [:paul]]

We might want to consider streamlining the breadcrumbs/infobar colors as well here. See bug 709740.

Comment 5

[Ethan Schoonover]

I'm the developer behind Solarized and would be happy to look at creating a palette proposal/draft that would work with the existing UI colorscheme. This is mostly a placeholder comment to give a heads up that I'm going to start looking at that now, unless there are objections, and I welcome any feedback or considerations prior to jumping in to this.

If there is a timeline or roadmap that indicates optimal completion dates, feel free to point me to that and I'll try to comply.

Comment 6

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

(In reply to Ethan Schoonover from comment #5)
> I'm the developer behind Solarized and would be happy to look at creating a
> palette proposal/draft that would work with the existing UI colorscheme.
> This is mostly a placeholder comment to give a heads up that I'm going to
> start looking at that now, unless there are objections, and I welcome any
> feedback or considerations prior to jumping in to this.

Splendid! If you need any pointers feel free to ping us in irc://irc.mozilla.org/#devtools

> If there is a timeline or roadmap that indicates optimal completion dates,
> feel free to point me to that and I'll try to comply.

We're flexible, but sooner is always better. :)

Comment 8

[Paul Rouget [:paul]]

Ethan, did you get a chance to work on this? Can I help?

Comment 9

[Ethan Schoonover]

Paul, yes. I have a prototype but really rough. I could have it in shape by mid next week at earliest due to some commitments over the next couple of days. Does that work for your schedule? Feel free to chat me on jabber/gchat on my email [e-mail] as well.

Comment 10

[Paul Rouget [:paul]]

Next week is great! No hurry though. And feel free to share any early ideas for quick feedback. Thank you for taking care of that :)

Comment 11

[Paul Rouget [:paul]]

friendly-bump :)

Comment 12

[Ethan Schoonover]

My wife literally just asked me if I was done with this as well. I'm sitting staring at it :)

Comment 13

[Paul Rouget [:paul]]

I like your wife :D

Comment 14

[Paul Rouget [:paul]]

This will affect bug 712469 and bug 735629

Comment 15

[Paul Rouget [:paul]]

Ethan, we need to move forward here. If you have anything you want to share, we would be happy to take over your work.

Comment 16

[Paul Rouget [:paul]]

Implementation will happen here: bug 753309

Comment 17

[Stephen Horlander [:shorlander]]

Attachment: Updated Colorscheme - i01

I know we don't support colors for all of these things yet, however I did a possible destination for when we do to work backwards from.

**Values**

*Editor*
Background: #131c26
Foreground/text: #8fa1b2
Comments: #5c6773

*Gutter*
Background: #0f171f
Line Numbers: #667380
Separator: #303b47

*Colors*
Pink/lavender: #a673bf
Purple:violet: #6270b2
Blue: #3689b2
Green: #5c9966
Yellow: #a18650
Orange: #b26b47
Red: #bf5656

Comment 18

[Ethan Schoonover]

I've totally dropped the ball on this, sorry folks. Don't want to hold this bug up, if you're going ahead on this without me, great, otherwise I'll post work in future when I can get back to it. -es

Comment 19

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

Hey Ethan. No problem. Sometimes life happens. :)

We'll pick these up.

Comment 20

[Paul Rouget [:paul]]

We have a new colorscheme. See bug 916766.