Closed Bug 715472 Opened 10 years ago Closed 8 years ago

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

Categories

(DevTools :: General, defect, P1)

x86
All
defect

Tracking

(Not tracked)

RESOLVED DUPLICATE of bug 916766

People

(Reporter: paul, Unassigned)

References

Details

Attachments

(1 file)

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.
Blocks: 696015
And we might need an alternative dark-color scheme for Orion.
Priority: -- → P2
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
(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.
We might want to consider streamlining the breadcrumbs/infobar colors as well here. See bug 709740.
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.
(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. :)
Duplicate of this bug: 712925
Blocks: 709740
Blocks: 708257
Ethan, did you get a chance to work on this? Can I help?
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 es@ethanschoonover.com as well.
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 :)
friendly-bump :)
My wife literally just asked me if I was done with this as well. I'm sitting staring at it :)
I like your wife :D
This will affect bug 712469 and bug 735629
Priority: P2 → P1
Summary: We need a proper colorscheme for Orion, view-source and the HTML Tree → We need a proper colorscheme for Orion, view-source, the debugger, the Rule/Computed view and the HTML Tree
Ethan, we need to move forward here. If you have anything you want to share, we would be happy to take over your work.
Assignee: nobody → shorlander
Status: NEW → ASSIGNED
Implementation will happen here: bug 753309
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
No longer blocks: 696015
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
Hey Ethan. No problem. Sometimes life happens. :)

We'll pick these up.
Blocks: 696015
Assignee: shorlander → nobody
Status: ASSIGNED → NEW
Depends on: 772946
We have a new colorscheme. See bug 916766.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → DUPLICATE
Duplicate of bug: 916766
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.