Firefox HTML Tree Panel

fiddle.css

html {
  background-color: -moz-dialog;
}

body {
  margin: 0;
  overflow: auto;
  font-family: Lucida Grande, sans-serif;
  font-size: 11px;
  border-top: 1px solid #BBB9BA;
}

h1 {
  font-size: 17px;
  border-bottom: 1px solid threedlightshadow;
}

a {
  color: #0000ff;
}

pre {
  margin: 0;
  font: inherit;
}

code {
  display: block;
  white-space: pre;
}

/* DOMPlate */

.objectLink-element,
.objectLink-textNode,
.objectLink-function,
.objectBox-stackTrace,
.objectLink-profile {
  font-family: Menlo, Andale Mono, monospace;
}

.objectLink-textNode {
  white-space: pre-wrap;
}

.objectLink-styleRule,
.objectLink-element,
.objectLink-textNode {
  color: #000088;
}

.selectorTag,
.selectorId,
.selectorClass {
  font-family: Menlo, Andale Mono, monospace;
  font-weight: normal;
}

.selectorTag {
  color: #0000FF;
}

.selectorId {
  color: DarkBlue;
}

.selectorClass {
  color: red;
}

.selectorHidden > .selectorTag {
  color: #5F82D9;
}

.selectorHidden > .selectorId {
  color: #888888;
}

.selectorHidden > .selectorClass {
  color: #D86060;
}

.selectorValue {
  font-family: Menlo, Andale Mono, monospace;
  font-style: italic;
  color: #555555;
}

.panelNode-html {
  -moz-box-sizing: padding-box;
  padding: 4px 0 0 2px;
}

.nodeBox {
  position: relative;
  font-family: Menlo, Andale Mono, monospace;
  padding-left: 13px;
  -moz-user-select: -moz-none;
}

.nodeBox.search-selection {
  -moz-user-select: text;
}

.twisty {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 14px;
  height: 14px;
}

.nodeChildBox {
  margin-left: 12px;
  display: none;
}

.nodeLabel,
.nodeCloseLabel {
  margin: -2px 2px 0 2px;
  border: 2px solid transparent;
  border-radius: 3px;
  padding: 0 2px;
  color: #000088;
}

.nodeCloseLabel {
  display: none;
}

.nodeTag {
  cursor: pointer;
  color: blue;
}

.nodeValue {
  color: #FF0000;
  font-weight: normal;
}

.nodeText,
.nodeComment {
  margin: 0 2px;
  vertical-align: top;
}

.nodeText {
  color: #333333;
}

.docType {
  position: absolute;
  /* position DOCTYPE element above/outside the "nodeBox" that contains it */
  /* Note: to be fixed in Bug #688439 */
  top: -16px;
  font-family: Menlo, Andale Mono, monospace;
  padding-left: 8px;
  color: #999;
  white-space: nowrap;
  font-style: italic;
}

.htmlNodeBox {
  /* make room for DOCTYPE element to be rendered above/outside "nodeBox" */
  /* Note: to be fixed in Bug #688439 */
  margin-top: 16px;
}

.nodeWhiteSpace {
  border: 1px solid LightGray;
  white-space: pre; /* otherwise the border will be collapsed around zero pixels */
  margin-left: 1px;
  color: gray;
}

.nodeWhiteSpace_Space {
  border: 1px solid #ddd;
}

.nodeTextEntity {
  border: 1px solid gray;
  white-space: pre; /* otherwise the border will be collapsed around zero pixels */
  margin-left: 1px;
}

.nodeComment {
  color: DarkGreen;
}

.nodeBox.highlightOpen > .nodeLabel {
  background-color: #EEEEEE;
}

.nodeBox.highlightOpen > .nodeCloseLabel,
.nodeBox.highlightOpen > .nodeChildBox,
.nodeBox.open > .nodeCloseLabel,
.nodeBox.open > .nodeChildBox {
  display: block;
}

.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel {
  border-color: Highlight;
  background-color: Highlight;
  color: HighlightText !important;
}

.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText {
  color: inherit !important;
}

.nodeBox.highlighted > .nodeLabel {
  border-color: Highlight !important;
  background-color: cyan !important;
  color: #000000 !important;
}

.nodeBox.highlighted > .nodeLabel > .nodeLabelBox,
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
.nodeBox.highlighted > .nodeLabel > .nodeLabelBox > .nodeText {
  color: #000000 !important;
}

.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox,
.nodeBox.nodeHidden .nodeCloseLabel,
.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeText,
.nodeBox.nodeHidden .nodeText {
  color: #888888;
}

.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.nodeHidden .nodeCloseLabel > .nodeCloseLabelBox > .nodeTag {
  color: #5F82D9;
}

.nodeBox.nodeHidden .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue {
  color: #D86060;
}

.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeTag,
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue,
.nodeBox.nodeHidden.selected > .nodeLabel > .nodeLabelBox > .nodeText {
  color: SkyBlue !important;
}

.nodeBox.mutated > .nodeLabel,
.nodeAttr.mutated,
.nodeValue.mutated,
.nodeText.mutated,
.nodeBox.mutated > .nodeText {
  background-color: #EFFF79;
  color: #FF0000 !important;
}

.nodeBox.selected.mutated > .nodeLabel,
.nodeBox.selected.mutated > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr.mutated > .nodeValue,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeAttr > .nodeValue.mutated,
.nodeBox.selected > .nodeLabel > .nodeLabelBox > .nodeText.mutated {
  background-color: #EFFF79;
  border-color: #EFFF79;
  color: #FF0000 !important;
}

.logRow-dirxml {
  padding-left: 0;
}

.soloElement > .nodeBox  {
  padding-left: 0;
}

.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel {
  border-color: #3875d7;
  background-color: #3875d7;
  color: #FFFFFF !important;
}

.nodeBox.highlighted > .nodeLabel {
  border-color: #3875d7 !important;
}

/************************************************************************************************/
/* Twisties */

.twisty
{
  -moz-appearance: treetwisty;
}

.nodeBox.highlightOpen > .nodeLabel > .twisty,
.nodeBox.open > .nodeLabel > .twisty
{
  -moz-appearance: treetwistyopen;
}

.memberRow.hasChildren > .memberLabelCell > .memberLabel,
.hasHeaders .netHrefLabel {
  background-position: 2px 2px;
}

.nodeBox.selected > .nodeLabel > .nodeLabelBox,
.nodeBox.selected > .nodeLabel {
  border-color: #3875d7;
  background-color: #3875d7;
  color: #FFFFFF !important;
}

.nodeBox.highlighted > .nodeLabel {
  border-color: #3875d7 !important;
}

.editingAttributeValue {
  background-color: #492;
}

#attribute-editor {
  visibility: hidden;
  position: absolute;
  z-index: 5000;
  background-color: #fff;
  border: 1px solid #000;
}

#attribute-editor.editing {
  visibility: visible;
}

#attribute-editor-input {
  border: none;
  padding: 2px 5px;
  font-family: Menlo, Andale Mono, monospace;
  font-size: 11px;
}

fiddle.html

<body>
    <div>
        <div role="presentation" class="nodeBox htmlNodeBox containerNodeBox repIgnore open">
            <div class="docType">
                &lt;!DOCTYPE html&gt;
            </div>
            
            <div role="presentation" class="nodeLabel">
                <img role="presentation" class="twisty"><span role="treeitem" aria-expanded=
                "true" class="nodeLabelBox repTarget">&lt;<span class=
                "nodeTag">html</span><span class="nodeAttr editGroup">&nbsp;<span class=
                "nodeName editable">xmlns</span>="<span data-attributename="xmlns" class=
                "nodeValue editable">http://www.w3.org/1999/xhtml</span>"</span><span class=
                "nodeBracket editable insertBefore">&gt;</span></span>
            </div>
            
            <div role="group" class="nodeChildBox">
                <div role="presentation" class="nodeBox containerNodeBox repIgnore">
                    <div role="presentation" class="nodeLabel">
                        <img role="presentation" class="twisty"><span role="treeitem" aria-expanded=
                        "false" class="nodeLabelBox repTarget">&lt;<span class=
                        "nodeTag">head</span><span class=
                        "nodeBracket editable insertBefore">&gt;</span></span>
                    </div>
                    
                    <div role="group" class="nodeChildBox"></div>
                    
                    <div role="presentation" class="nodeCloseLabel">
                        <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                            "nodeTag">head</span>&gt;</span>
                    </div>
                </div>
                
                <div role="presentation" class=
                "nodeBox containerNodeBox repIgnore open selected">
                    <div role="presentation" class="nodeLabel">
                        <img role="presentation" class="twisty"><span role="treeitem" aria-expanded=
                        "true" class="nodeLabelBox repTarget">&lt;<span class=
                        "nodeTag">body</span><span class="nodeAttr editGroup">&nbsp;<span class=
                        "nodeName editable">dir</span>="<span data-attributename="dir" class=
                        "nodeValue editable">ltr</span>"</span><span class=
                        "nodeAttr editGroup">&nbsp;<span class=
                        "nodeName editable">onload</span>="<span data-attributename="onload" class=
                        "nodeValue editable">onLoad(event)</span>"</span><span class=
                        "nodeBracket editable insertBefore">&gt;</span></span>
                    </div>
                    
                    <div role="group" class="nodeChildBox">
                        <div role="presentation" class="nodeBox textNodeBox repIgnore">
                            <div role="presentation" class="nodeLabel">
                                <span role="treeitem" class="nodeLabelBox repTarget">&lt;<span class=
                                    "nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
                                    "nodeName editable">id</span>="<span data-attributename="id" class=
                                    "nodeValue editable">brandStartSpacer</span>"</span><span class=
                                    "nodeBracket editable insertBefore">&gt;</span>&lt;/<span class=
                                    "nodeTag">div</span>&gt;</span>
                            </div>
                        </div>
                        
                        <div role="presentation" class="nodeBox containerNodeBox repIgnore">
                            <div role="presentation" class="nodeLabel">
                                <img role="presentation" class="twisty"><span role="treeitem"
                                aria-expanded="false" class="nodeLabelBox repTarget">&lt;<span class=
                                "nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
                                "nodeName editable">id</span>="<span data-attributename="id" class=
                                "nodeValue editable">brandStart</span>"</span><span class=
                                "nodeBracket editable insertBefore">&gt;</span></span>
                            </div>
                            
                            <div role="group" class="nodeChildBox"></div>
                            
                            <div role="presentation" class="nodeCloseLabel">
                                <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                                    "nodeTag">div</span>&gt;</span>
                            </div>
                        </div>
                        
                        <div role="presentation" class="nodeBox containerNodeBox repIgnore">
                            <div role="presentation" class="nodeLabel">
                                <img role="presentation" class="twisty"><span role="treeitem"
                                aria-expanded="false" class="nodeLabelBox repTarget">&lt;<span class=
                                "nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
                                "nodeName editable">id</span>="<span data-attributename="id" class=
                                "nodeValue editable">searchContainer</span>"</span><span class=
                                "nodeBracket editable insertBefore">&gt;</span></span>
                            </div>
                            
                            <div role="group" class="nodeChildBox"></div>
                            
                            <div role="presentation" class="nodeCloseLabel">
                                <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                                    "nodeTag">div</span>&gt;</span>
                            </div>
                        </div>
                        
                        <div role="presentation" class="nodeBox containerNodeBox repIgnore">
                            <div role="presentation" class="nodeLabel">
                                <img role="presentation" class="twisty"><span role="treeitem"
                                aria-expanded="false" class="nodeLabelBox repTarget">&lt;<span class=
                                "nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
                                "nodeName editable">id</span>="<span data-attributename="id" class=
                                "nodeValue editable">contentContainer</span>"</span><span class=
                                "nodeBracket editable insertBefore">&gt;</span></span>
                            </div>
                            
                            <div role="group" class="nodeChildBox"></div>
                            
                            <div role="presentation" class="nodeCloseLabel">
                                <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                                    "nodeTag">div</span>&gt;</span>
                            </div>
                        </div>
                        
                        <div role="presentation" class="nodeBox containerNodeBox repIgnore open">
                            <div role="presentation" class="nodeLabel">
                                <img role="presentation" class="twisty"><span role="treeitem"
                                aria-expanded="true" class="nodeLabelBox repTarget">&lt;<span class=
                                "nodeTag">div</span><span class="nodeAttr editGroup">&nbsp;<span class=
                                "nodeName editable">id</span>="<span data-attributename="id" class=
                                "nodeValue editable">bottomSection</span>"</span><span class=
                                "nodeBracket editable insertBefore">&gt;</span></span>
                            </div>
                            
                            <div role="group" class="nodeChildBox">
                                <div role="presentation" class="nodeBox containerNodeBox repIgnore open">
                                    <div role="presentation" class="nodeLabel">
                                        <img role="presentation" class="twisty"><span role="treeitem"
                                        aria-expanded="true" class="nodeLabelBox repTarget">&lt;<span class=
                                        "nodeTag">div</span><span class=
                                        "nodeAttr editGroup">&nbsp;<span class=
                                        "nodeName editable">id</span>="<span data-attributename="id" class=
                                        "nodeValue editable">aboutMozilla</span>"</span><span class=
                                        "nodeBracket editable insertBefore">&gt;</span></span>
                                    </div>
                                    
                                    <div role="group" class="nodeChildBox">
                                        <div role="presentation" class="nodeBox textNodeBox repIgnore">
                                            <div role="presentation" class="nodeLabel">
                                                <span role="treeitem" class=
                                                "nodeLabelBox repTarget">&lt;<span class=
                                                    "nodeTag">a</span><span class=
                                                    "nodeAttr editGroup">&nbsp;<span class=
                                                    "nodeName editable">href</span>="<span data-attributename="href"
                                                    class=
                                                    "nodeValue editable">http://www.mozilla.com/about/</span>"</span><span class="nodeBracket editable insertBefore">&gt;</span><span class="nodeText editable"><span class="">About
                                                    Mozilla</span></span>&lt;/<span class=
                                                    "nodeTag">a</span>&gt;</span>
                                            </div>
                                        </div>
                                    </div>
                                    
                                    <div role="presentation" class="nodeCloseLabel">
                                        <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                                            "nodeTag">div</span>&gt;</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div role="presentation" class="nodeCloseLabel">
                                <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                                    "nodeTag">div</span>&gt;</span>
                            </div>
                        </div>
                    </div>
                    
                    <div role="presentation" class="nodeCloseLabel">
                        <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                            "nodeTag">body</span>&gt;</span>
                    </div>
                </div>
            </div>
            
            <div role="presentation" class="nodeCloseLabel">
                <span class="nodeCloseLabelBox repTarget">&lt;/<span class=
                    "nodeTag">html</span>&gt;</span>
            </div>
        </div>
    </div>
</body>

fiddle.js

/* (Firefox only)

So what you see here is a HTML Panel. It will be part of Firefox, and will be used by Web Developers to debug a page. To see it in action, look at this screenshot:

# http://i.imgur.com/d6fOI.png

You can see more mockups here:

# http://people.mozilla.com/~shorlander/devTools/devTools.html

We would really appreciate if you can make this look better. Something less boring and more sexy. Don't touch the HTML. Play only with the CSS.

Ping me on Twitter if you manage to do something: @paulrouget

Related gist: https://gist.github.com/1261452

Thank you! … and welcome to the Open Source world :)

*/

fiddle.manifest

name: Firefox HTML Tree view
description: The design of the current HTML Tree view in Firefox is pretty basic. We should improve that.
authors:
  - Mozilla
normalize_css: no

looks great :)