696015 - [markup panel] Make the HTML Tree Panel pretty

Status: RESOLVED WONTFIX

(DevTools :: Inspector, defect, P2)

Description

[Paul Rouget [:paul]]

Attachment: Current HTML Tree look

The current HTML Tree Panel has a pretty basic style, and doesn't match the dark theme we use for the devtools.

Comment 1

[Paul Rouget [:paul]]

Several contributors proposed different designs:
- http://jsfiddle.net/pivanov/caWaQ/4/
- http://jsfiddle.net/sjuyB/20/
- http://jsfiddle.net/APAZE/1/ (dark design)

Comment 2

[Paul Rouget [:paul]]

I think view-source and the HTML Tree panel should share the same code (therefore, the same colors).
http://mxr.mozilla.org/mozilla-central/source/layout/style/viewsource.css

Comment 3

[Sage Druch]

I'm interested in working on this, but I'm completely new to Mozilla development, if someone could point me in the right direction, that would be much appreciated.

Comment 4

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

(In reply to Sage Druch from comment #3)
> I'm interested in working on this, but I'm completely new to Mozilla
> development, if someone could point me in the right direction, that would be
> much appreciated.

styling for the HTML panel lives in:

http://mxr.mozilla.org/mozilla-central/find?string=/htmlpanel.css&hint=browser/devtools/browser/devtools/highlighter/inspector.html

You may also be interested in:

http://mxr.mozilla.org/mozilla-central/source/browser/devtools/highlighter/inspector.html?force=1

http://mxr.mozilla.org/mozilla-central/source/browser/devtools/highlighter/TreePanel.jsm

and the top-level:

http://mxr.mozilla.org/mozilla-central/source/browser/devtools/highlighter/inspector.jsm

you'll also see an adjacent file called domplate.jsm which is the templating engine and descriptors for the tree panel. 

hop into irc://irc.mozilla.org/#devtools if you want to ask questions with slightly more immediate feedback. We should also get some colors from shorlander from UX.

Comment 5

[Sage Druch]

Ok thank you, but I have just one question about the format for the colouring, that being whether it would be better to have the colours in hex, rgb, or colour names.

Comment 6

[Sage Druch]

Attachment: example of view source window (with some problems)

This is somewhat what the final product may look like, as you can see, the text that would normally be black on the view source window is still black, (mainly because I was not able to find the class that specifies attributes for that, so I'll keep working on that) making it hard to read. And as you will likely also notice , this is only the view source window, (I haven't quite gotten as far as this on the html tree), anyways, feedback or help is always welcome.

P.S. Shouldn't this be changed to a all-platforms bug, considering the fact that the html tree looks identical on all platforms, or maybe I'm missing something.

Comment 7

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

yes you're right about the platforms.

I think we need to get some actual color specs for the tree, probably from shorlander who's assigned on bug 715472. We should probably match those colors here.

Stephen, if you have any colors for these panels, let us know. thanks!

Comment 8

[Paul Rouget [:paul]]

Colors for the Markup Panel (aka HTML Tree): https://bug715472.bugzilla.mozilla.org/attachment.cgi?id=622375

Comment 9

[Paul Rouget [:paul]]

There are a lot of style-bugs for the inspector (and highlighter, and rule view, and property view). These bugs are old, and we changed a lot of things lately (toolbox). I WONTFIX this bug.

(that doesn't mean we don't want to improve the devtools theme)