Inspector Style Panel
The first iteration of the Inspector’s style panel has landed!
It’s pretty basic right now and we’re going to be beefing it up and adding to it in the hopefully very near future. What it shows right now is a list of all CSS properties for the selected (highlighted) element in a web-page. It will also tell you which elements the rules were inherited from (in reverse-order) and from which stylesheet the rules came from. You may need to expand the panel slightly to see the full text.
These panels are not positionable yet, but with the landing of the titlebar patch in bug 552982, it’ll be a quick thing to add. I’m hoping that comes in Real Soon Now. The funny-looking title bar that doesn’t do anything in the current version is actually a toolbar I added as a placeholder for the real thing. In the meantime, I suggest moving your browser window to the left of your screen to allow some space at right for the panel to live in (as well as some space below your window for the tree panel to inhabit).
What’s next?
I still have a few downstream patches requiring review.
- Milestone 0.3, create DOM Object viewer for Inspector.
- Milestone 0.5, rewrite tree panel
- Milestone 0.6, create popup editor
I have a patch for the popup editor which needs to get added to that last bug which I demoed at the Summit Science Fair. I need a similar editor for CSS editing. Once those are squared away, I’ll be working on redesigning the highlighter panel and getting the styling finished up for the various pieces on all platforms.
Please file bugs in Firefox::Devtools.
